{"_id":"rendition","_rev":"7871-293f773a43f907690b2e4debd1bd56bf","name":"rendition","dist-tags":{"latest":"35.2.0"},"versions":{"3.0.0":{"name":"rendition","version":"3.0.0","license":"MIT","_id":"rendition@3.0.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ff83f7cb206cc865a10c33434c8115eb49607bb3","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.0.0.tgz","integrity":"sha512-VWLfYBbXFQzyLEmQWEuJIAfiRYafKpxrooChOH90RueWl9VQMBlBrjcTyhGtGfW2VqJr+Zsg2D+odRsemSzttQ==","signatures":[{"sig":"MEUCIQD2DLoU1g96KZbrBDe6wKUavKgiKRo8hL19EUVGPU8jIgIgI75upNMIuQFIT3+bPb1tQe1mZOKbAy3Fv8eCoaMcORw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings.d.ts","_shasum":"ff83f7cb206cc865a10c33434c8115eb49607bb3","gitHead":"be59dbb35f892b1ccb47bc187d2cf34ae2468d55","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.2","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.0.0.tgz_1514381872152_0.47916015749797225","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.1.0":{"name":"rendition","version":"3.1.0","license":"MIT","_id":"rendition@3.1.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"840dcfd5640d7c02db5db20f342a939dc732ad39","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.1.0.tgz","integrity":"sha512-3Y8SWNuZZUX8aCNnMOXr8ClqNhaL+kAj4DJpw9bl3VnSAFGgez08pHOaqTgsmBOPy7DmQ2RhDgxQpyeXp9vrLg==","signatures":[{"sig":"MEUCIQD+zZb8Kh6N22qyIMYgGNN4d68Kah9ojXnXFqSrNyEG/AIgLdhr4rrhkAUB7Ka/ziZUyx7DXGSyCPnE+7UJxUveWOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings.d.ts","_shasum":"840dcfd5640d7c02db5db20f342a939dc732ad39","gitHead":"143ef44fcd307cef39ee97eb8fff4019696baea3","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.2","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.1.0.tgz_1514544839474_0.4981295200996101","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.1.1":{"name":"rendition","version":"3.1.1","license":"MIT","_id":"rendition@3.1.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"a8a0ff5da11d5d212b81453bf41bfd33d04554e7","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.1.1.tgz","integrity":"sha512-QOn3ec8ZmJdnbdtMsuY1JHRrobYdWkZYb8CvuY6gnNQDFu+O04eeNh8JV8gbfJgrMpm6kbQ1nsTPeEaJL+eX3Q==","signatures":[{"sig":"MEYCIQCV2ffk+QuzufmJGk+eoTT+w4LZ3y1x7rswybDWwZ10WAIhAOPnToRFZO1eAgjZth8EyEeD11Ni1M/HhD3TUyI9EJ59","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings.d.ts","_shasum":"a8a0ff5da11d5d212b81453bf41bfd33d04554e7","gitHead":"5833700af7d87f31b62c72f256fbb9d588f06237","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.1.1.tgz_1514971102767_0.2955331092234701","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.2.0":{"name":"rendition","version":"3.2.0","license":"MIT","_id":"rendition@3.2.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"69bf646ae9d46a9bdb134b84a26064372875533b","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.2.0.tgz","integrity":"sha512-xHqC7AVnnTno18Gner4WvDC2NWLw7Of45HTz7ViAheExaCcspXrfuaAew6yDn4bqUf0coNynndATF9GZKDCjUw==","signatures":[{"sig":"MEUCIQChpjKfOd9P8ibuXTVqZJtwnjuloZzYOJgUn4j4xDlPCAIgeTMSvRFv3poYjYnBDsiFvGGBW8ijlM5v4mplepMqE9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings.d.ts","_shasum":"69bf646ae9d46a9bdb134b84a26064372875533b","gitHead":"53a5a64700734b0c25d642f35536f22029ac9fd0","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.2.0.tgz_1514987010799_0.6700956961140037","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.2.1":{"name":"rendition","version":"3.2.1","license":"MIT","_id":"rendition@3.2.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"9c4ea3bd6e134c9f537538f5fae8e4ebf4510c86","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.2.1.tgz","integrity":"sha512-A/QlreLhd77oY7uTENw2ldnM03xaPgiCSSgeXDQFCTiKG1rMOLgaceE1CYDtQhNwGmX4DaWxMzYRgABQM274Kg==","signatures":[{"sig":"MEQCIAgKR5Po+87jAZQpDTH+npWeL3ftErXlL+LDwKEpXRXpAiA5pAQHp7d6MUxQJIhsTlau/Aeuj9tAtH/Eprg6KJTjfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings.d.ts","_shasum":"9c4ea3bd6e134c9f537538f5fae8e4ebf4510c86","gitHead":"3ff8e76e3686bef6eb9a9ff0fbaee8dedc9a7e81","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.2.1.tgz_1514988995234_0.15666879247874022","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.3.0":{"name":"rendition","version":"3.3.0","license":"MIT","_id":"rendition@3.3.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"3077add6cfb3dbce98a9e70ddffca080af0e1690","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.3.0.tgz","integrity":"sha512-7vmLZyd2TaYsfoMaqFWeW6rX/l38oGTiURWo3rmDiF3ji10banY5n0nbodj7K8+tdvmcRTnBezh/QB8nRcqQEA==","signatures":[{"sig":"MEUCIQDyCczeG3MR/eDz3eam8MWuauE1d5635ollIQVzoO5AvAIgBRlPoDHuQ8u2KlLXHhxJ/QVlOP+xk8xjcuZGLNwiOjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings.d.ts","_shasum":"3077add6cfb3dbce98a9e70ddffca080af0e1690","gitHead":"137b8a3689c068084a7d29a81b5d92052b316094","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.3.0.tgz_1515064813454_0.757227728376165","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.4.0":{"name":"rendition","version":"3.4.0","license":"MIT","_id":"rendition@3.4.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b357e461e83c09d73ad64376425d4acbcd48d3af","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.4.0.tgz","integrity":"sha512-QJBP3EeG1cTpeNceLqz9+1zH6pIyKfx6narQn+5S+QS1g+pUetPN6qocrFzWbkIYqGB/+TyNPp9dFX8xVvTOxQ==","signatures":[{"sig":"MEUCIB49xysXukHighqNADsVhBmkiGBkrLepCXrDny05KCQnAiEAoSxeSo8cwktlSGloCZXwlLZq4kVD+jzLBNbnaqEom1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings.d.ts","_shasum":"b357e461e83c09d73ad64376425d4acbcd48d3af","gitHead":"2a6e860e96b30919da59445c4c0c79c0d3f6a0a8","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.4.0.tgz_1515081055518_0.43130714097060263","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.5.1":{"name":"rendition","version":"3.5.1","license":"MIT","_id":"rendition@3.5.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"21378541185772187e56554a132b235351d74bb1","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.5.1.tgz","integrity":"sha512-vvPyAYJivxpHaru+F8VVMYqxeB/+bgpmBt5cxPPcs/FEguN+IXGNzHIDQLTt7ID5uTf9gLT/oO1Kblg9XgF3sQ==","signatures":[{"sig":"MEUCIES52wxWTeldtINJWuVFwlAs4NBRMZ4C/7N7nne6h+nuAiEA2dijJynFVCJX+BCu7nLOqtNJbPVgNQMayoxY7yf/9C4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"21378541185772187e56554a132b235351d74bb1","gitHead":"36b59b7b8a2d1bf290384ffbaefb65983c99b69c","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.5.1.tgz_1515164851179_0.7565781294833869","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.6.0":{"name":"rendition","version":"3.6.0","license":"MIT","_id":"rendition@3.6.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"17afa25e8feaca9e22b0f66dc65e912abed2bb96","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.6.0.tgz","integrity":"sha512-/yMm5NfT+VKckhX1Xt896jyHxqRR0WKbbJ2/vaOGkB2Q4uSnmCZ2oD0dx7Jmh8LPUwiAj4RLMZV+NxbQCBONSA==","signatures":[{"sig":"MEUCIQDRs0UXGAJu/rBS/Sk2YUWAX5Ewmn6GavuyQSDHzw3nUQIgec2Dac64r0qcdT9MZmEP2eztVv0F8KaWC4gS0XzjlgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"17afa25e8feaca9e22b0f66dc65e912abed2bb96","gitHead":"71645b447cc9828dcf3751e6899a38ed2ead644d","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.6.0.tgz_1515166996918_0.9282252911943942","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.7.0":{"name":"rendition","version":"3.7.0","license":"MIT","_id":"rendition@3.7.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"81f9f48b49ae6303f25c0785cb64e0c13f5a0c3d","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.7.0.tgz","integrity":"sha512-wuUtLklAayevzOCOQmaKo6chvAUk95w5oT1iLYrCqR4SdjZ2kuALBs4QOmMscVT37mERJM7xea3GKUvOfe8pRA==","signatures":[{"sig":"MEUCIQD/RrDPyJG1pQT1INK/k2UWL7x/lkxo/qRL4ZBRrXuFkAIgUPqS4qDEGb3DkV/YDQ60DSbjpGlxdQK4p79lWF1TaTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"81f9f48b49ae6303f25c0785cb64e0c13f5a0c3d","gitHead":"83e075637e0cca2b65fc731a0c04c860f5e09e85","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.7.0.tgz_1515494579277_0.49091809638775885","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.7.1":{"name":"rendition","version":"3.7.1","license":"MIT","_id":"rendition@3.7.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d4a97897a19dc076bd3f8481d061ded53ea474f3","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.7.1.tgz","integrity":"sha512-16n+53mhOCxHM9/HzFvJ8064JzmdXMaiR/exG0+u/dfTDBfQawrQ5tgh3moOV+l17ZfQriDfI8HsBbMzJS6iLg==","signatures":[{"sig":"MEUCIQCdx+Oij6j2NSFxI2lRsciDDCHmi0xXLAtWclnRht4VtwIgLoBgsRy6K/et24vKvxEdWhVwDlRKELTul9LRuVr3TSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"d4a97897a19dc076bd3f8481d061ded53ea474f3","gitHead":"f93e8f318989556f993df719f5cf97cdaa6136c4","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.7.1.tgz_1515596480160_0.38562564994208515","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.8.0":{"name":"rendition","version":"3.8.0","license":"MIT","_id":"rendition@3.8.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"0f701da180961e810587dedc7b288ebf1f37001a","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.8.0.tgz","integrity":"sha512-FHl/swQ+wsBtKjqnd4XbEsMxxIi4EnUURHJ7tfnqCZtmuEZkeANNTZ9ywHpfRXGwJ53AYaNRg+oX7OIc+0K2vQ==","signatures":[{"sig":"MEUCIEINJF42l8Znq5Moem2VC/yL8QGW5EDLcVbys30c97cJAiEA/errbJFgZ471ecgp7+7CuWaKNKYCb7Yy82wQPZnQcek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"0f701da180961e810587dedc7b288ebf1f37001a","gitHead":"83e90f61af96bc0a82572d88a5972a296a9021db","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.8.0.tgz_1515777367997_0.9311847235076129","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.9.0":{"name":"rendition","version":"3.9.0","license":"MIT","_id":"rendition@3.9.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bcf8e5756d8e4e33db2b96f759fee3c0c333b31d","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.9.0.tgz","integrity":"sha512-F3fYWAASZn4s7v25V+HDwPc14EWlSp2gXBlGvmEisuxkdAY2uMYDdxPcXaSkpiCQghfomLZMhelB4dStDUxhpA==","signatures":[{"sig":"MEUCID+G4FKUiAAcdhWM7xzPHMB2mhF9qnvvv1XHFOHIxR0uAiEAmxN1sAGxi1A2iaAnxhgD8/xVdk9fJ69DMv8J1bLgd48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"bcf8e5756d8e4e33db2b96f759fee3c0c333b31d","gitHead":"9a7b3a33f0d8a5884541b9e1639f5b512221bb04","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.9.0.tgz_1516096271541_0.8834392640274018","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.10.0":{"name":"rendition","version":"3.10.0","license":"MIT","_id":"rendition@3.10.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ea2bd1b70903a68a091d5522222eb2cdb393a764","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.10.0.tgz","integrity":"sha512-iIVeC2MhqvAZHUHD7OQZPYOMjSr1pMVubbHNcTD3C0RUSBTjUJAdOajNwJ88cySV/dYolxlKrWj80MmFyMGAfw==","signatures":[{"sig":"MEQCID11THdXMXS9AU7iGB+WREmXWdkNByITg5IUk2FfCxX0AiAFRFON0Ha1ia3fnNdySQRN6gEcXhfHO918yoE1ES+35g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"ea2bd1b70903a68a091d5522222eb2cdb393a764","gitHead":"6c491f056a6e5f16ae2d7eeee229fa44e5003a26","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.10.0.tgz_1516357526180_0.6544865360483527","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.11.0":{"name":"rendition","version":"3.11.0","license":"MIT","_id":"rendition@3.11.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"99d6626bb4e244ce9decfe033ab1e98c6a3ba19a","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.11.0.tgz","integrity":"sha512-hvGHJEtx+cjLWwJu3UJu07lnIPsu1Rv8/Q3ZOq7H/YwPQtb+RIivGaVPSyrByP5EDc6518h7pRCdn6sUQ8kYfQ==","signatures":[{"sig":"MEUCIQClWeypRS5Wx2t+SgNAn3E5w61hzVlXwNCqDJhBjq5LYgIgOlqJ1tf5AqsXON5HoUEW0cUrPANjc85lh4LDyFRjnjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"99d6626bb4e244ce9decfe033ab1e98c6a3ba19a","gitHead":"8bc4ecfc4bb613b100bd8d09a7f76546c2383e75","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.11.0.tgz_1516377289313_0.5268554969225079","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.12.0":{"name":"rendition","version":"3.12.0","license":"MIT","_id":"rendition@3.12.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d61dd89d81ad68c644999c5b11f1e5fc1f5ac8b6","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.12.0.tgz","integrity":"sha512-hPxxSyrmHKBH9bjleTnZ4q09ozJcGCptrPEea6zWfRuv1oJmlS8qTi0ag2/r48H1V3koS4ILk2lB99Eq0A7oOw==","signatures":[{"sig":"MEUCIDRgypDkO8T+pgZycUo/pgjUO/92mWPETA70k2YW+dInAiEA8bMEOJhIUIbNXFP4/MvOFbkKzhgQVwO4NmTUSQguhX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"d61dd89d81ad68c644999c5b11f1e5fc1f5ac8b6","gitHead":"49135ab5f609b5543a9869acf474616886d98104","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.12.0.tgz_1516634751098_0.2570203375071287","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.13.0":{"name":"rendition","version":"3.13.0","license":"MIT","_id":"rendition@3.13.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"12ef6adaeb429a1852a849a2b226938e3248b0db","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.13.0.tgz","integrity":"sha512-d5HqeD5AziGXLDdYSewf9X6zkS/OjB/EWlnPi0FwtgPDBmjSgX8K7oKpsGkg6k4PerMWDM1G2O2389OO93J81w==","signatures":[{"sig":"MEQCIFgx8GsVrj42l+fib41F1wkP9CDGucaXZvMo4MkTvNgUAiACWi0IZE2C4ZLjOMH/nQaqM0g7to3rHZezQ7QHzP58xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"12ef6adaeb429a1852a849a2b226938e3248b0db","gitHead":"df2828de3dfc57befff3ce48daf69166d942b2d3","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.13.0.tgz_1516642748022_0.5553759559988976","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.14.0":{"name":"rendition","version":"3.14.0","license":"MIT","_id":"rendition@3.14.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"f0daa6305fdbaadce333d9e45bf6783bee5fc8e8","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.14.0.tgz","integrity":"sha512-UTWHJlNlwQzli2VN9qb9qfL26QJtU6wEgQy/OjmGm6/nwbBzKOm7uRCWgTUhMii8/04y0YqU8mg9jLeGvWVuAg==","signatures":[{"sig":"MEUCICSVbG0r495ryVjmP/S2bhxoKmtAehACGzceGzAqSbNgAiEAo5zlXEUz9O51hYHxqj1LpFcN2EE05V/KH2bRMP9Lkks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"f0daa6305fdbaadce333d9e45bf6783bee5fc8e8","gitHead":"c6a667fea08061c3a229d88512b121a3919a186d","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.14.0.tgz_1516714870390_0.6195621907245368","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.15.0":{"name":"rendition","version":"3.15.0","license":"MIT","_id":"rendition@3.15.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"77b8304fe8f41da927b40903bf29dd7c56b2cb52","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.15.0.tgz","integrity":"sha512-wXdwTivzchF54PLhL8Fdb9mlAwhs639sA7n3Rr595pcephs0LzvvQvGaSgTI2st0BthgH5nw6xZ6kdEQE+I0+A==","signatures":[{"sig":"MEYCIQCgmup29hhN1RfAdkhnRNOwtl2qTYCjZ+LBUi2tJCPJRAIhAMMqWa/rw56jcw/LIbb6eSvmWEtV7IJZS6RQ/h5ZZD1i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"77b8304fe8f41da927b40903bf29dd7c56b2cb52","gitHead":"864c72dbd9c7be946822fd2a28f411b8bd9476ba","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.15.0.tgz_1516718890651_0.05626409477554262","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.16.0":{"name":"rendition","version":"3.16.0","license":"MIT","_id":"rendition@3.16.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"46f0b12932bcbeabf61217a03c05fde5e18969c3","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.16.0.tgz","integrity":"sha512-vsjL8n2bP4Vq6vQ0XYfZAFejhnUC/kw6U5tDD7lsa+X+xSiOVYccj81IHGmU/CCBHbIc0X1n/4wfN4VEyQo2lw==","signatures":[{"sig":"MEYCIQCcUGfm5jAtQkiCtKWxthPdQGSwCazQu2LuIgFr0p9mQAIhAMuOC2SUIWnl20UnVSdfwfGGQ7sHxfaf4ZUva0yru/9h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"46f0b12932bcbeabf61217a03c05fde5e18969c3","gitHead":"1461f944fc828efddb57b7a0b8aae53bf8f3aad4","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.16.0.tgz_1516720062377_0.04512840183451772","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.16.1":{"name":"rendition","version":"3.16.1","license":"MIT","_id":"rendition@3.16.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ed7654e2956dfd27bfe26fbfac53ce0c4cfdb469","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.16.1.tgz","integrity":"sha512-QD8C776UKhmpeLe00CHEHoGBBMFIXW0BON9RH38RZw7yVd1gAfIX9SO9+ZcUBQQVz/RP+XOy8fnIlEEphlEUjQ==","signatures":[{"sig":"MEUCIQDu92oDQJn0JyFzIs/SALg+RAE7bMfUJbuUmBeTNFgYrwIgFkygvjhg9mYc98svSCteafOM/nxrnxYOBZ+VBIlpvGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"ed7654e2956dfd27bfe26fbfac53ce0c4cfdb469","gitHead":"a815b99b71012dcb5211e202c3142a3024bb4464","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.16.1.tgz_1516720933699_0.6269138159696013","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.17.0":{"name":"rendition","version":"3.17.0","license":"MIT","_id":"rendition@3.17.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"dda39d392487a0e43a0267956cc2f0ed41fff8a8","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.17.0.tgz","integrity":"sha512-TnqXGwzCJNrSLhumab1y/mXUX0m+0EYgfW0LzNp2etBJlxH0qRXsOvCDHApjH+ZuktJJfbOpzSHurFzgz5EpKQ==","signatures":[{"sig":"MEQCIARQkmwsSQGTCOIQ5vrmg8w86qTIO00CHuLUCSXQBwR7AiAvAuUR3wmrjvBViJSHHncMhrZr/ymvigBY/Sv/EqTmAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"dda39d392487a0e43a0267956cc2f0ed41fff8a8","gitHead":"0d7dcde263c2f6dbfeba24bb468f9d33efa678b5","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.17.0.tgz_1516728410977_0.8403042366262525","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.17.1":{"name":"rendition","version":"3.17.1","license":"MIT","_id":"rendition@3.17.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"41a01d30819a11c846751693640dad45d2ce52fb","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.17.1.tgz","integrity":"sha512-AXzJVtJk0gfOTF859WVCREka70MixlaaBlLLy2FdRhgqHy2zsIPcUMRaeP01b197cduMtvm6YkPtktfgHUcKfw==","signatures":[{"sig":"MEUCIDM+k51q+4NqKfcXfGs0t1zwMeqdBMi112ujgInT7reLAiEA/scBlJRHOuCIa9lJJYjhYL9LrdK7Vexxzdpr2+ISb5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"41a01d30819a11c846751693640dad45d2ce52fb","gitHead":"5ac720283e558606b9ab0ae8bc6177110583203a","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.17.1.tgz_1516786108550_0.17716253711842","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.18.0":{"name":"rendition","version":"3.18.0","license":"MIT","_id":"rendition@3.18.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6d75fc5a071f3b350d12cf4cd7df38f7ee28418a","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.18.0.tgz","integrity":"sha512-tDdfEQrIx8yNnSnw4QW81bCiMolauJXsMvcWUeKHKsrqy30sq+CAlIrZCqyu407GzboY34Vom0MEMEZRLcm0FA==","signatures":[{"sig":"MEUCIQDz3VykOJnRW5NKNcYN89ob3dGpVwFUXgAS+qD8ep8fvgIgTp7AH/V8JhAI19aW9r8Wf2pLgc+SSFMLCI9H9ZYX3aM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"6d75fc5a071f3b350d12cf4cd7df38f7ee28418a","gitHead":"4471e965a261cc6d44f6cc4c12ba92290fb28c8d","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.18.0.tgz_1516875064975_0.642069088993594","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.19.0":{"name":"rendition","version":"3.19.0","license":"MIT","_id":"rendition@3.19.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"67efdb57e90b74d032cb75b1613501dc9117fc16","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.19.0.tgz","integrity":"sha512-k7a2H/SH0Qnf3x28U/tv1aIheZU2t2GEaqZlh9JVDeDPfa/QP2xs9bD4OLfUnn99Rj9osWr9ljDw5r47XyJbnw==","signatures":[{"sig":"MEQCIBBhK4ogHoUGZxKqFqvibyNWEWd+UkUPg1ZunTdnhUFkAiBC/IX5RN1f8AzW+c0K92JRdkqNQvyb8Vfs+6h+LrMJhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"67efdb57e90b74d032cb75b1613501dc9117fc16","gitHead":"2a5e67eb9ffd06a643d53a9e708f9ae7beaf5f06","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.19.0.tgz_1516882191086_0.16130948928184807","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.20.0":{"name":"rendition","version":"3.20.0","license":"MIT","_id":"rendition@3.20.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"59d4a5469d18d7330c0c33f1d203e970e96e2ecc","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.20.0.tgz","integrity":"sha512-XI3l1tZKOovVou+Cp/EBZhMpwjJNzsta0gHboZfrI4/rqR5l5ByeqPzaIDSQSM/GYHz6RkOKUTXmvuU+o0DSug==","signatures":[{"sig":"MEQCIHUzMQFhgCvEwcZAeXJ8cO5H0pn9SrGWYSzHO/EoubgYAiAIt38akGdoF8QGQ6DiL1rRnuR/Z1lUjY93RAGHI/ZXIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"59d4a5469d18d7330c0c33f1d203e970e96e2ecc","gitHead":"fd1c8718fbf56cd7b7d7df69e0108e1b1698fded","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.20.0.tgz_1517197589922_0.9403935493901372","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.20.1":{"name":"rendition","version":"3.20.1","license":"MIT","_id":"rendition@3.20.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"57ea8eeff354c4365729c14e14748d83b285bcfc","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.20.1.tgz","integrity":"sha512-++JkQ1xw/SBo0Ls0KMpvzQyyf7Twiu+ZgKP4GB1I+n5ilcIYbkcV0+G3s2+/+4iTgxqBvbIRX8b7+H30vJziXw==","signatures":[{"sig":"MEUCIF+b9qSg+1J+90ETkZR+C2j+Ae1k+RZ1TovlBkph5/o+AiEAg9zWfKiFnzFSQ6yN+G1KXbnExLOpXrswwlRrMKGJNZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"57ea8eeff354c4365729c14e14748d83b285bcfc","gitHead":"9b9fc365bcd76ae5ee5536e35c2a9ccb47fc640e","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.20.1.tgz_1517221802255_0.25408854172565043","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.20.2":{"name":"rendition","version":"3.20.2","license":"MIT","_id":"rendition@3.20.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"883298db29d2721aa4f0f2def29b097069d8883f","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.20.2.tgz","integrity":"sha512-XQDiQw6YLurb98Xf/S4wl1V1cynqrbw1hzAJuCQIg255BPJC8rwas/Et2O6g0V0huFbLY/+80Vac9S9dUxSdSQ==","signatures":[{"sig":"MEUCIGOImD278y6AWLc5h/8wdO1CtBIns3dCP9SnActX1nleAiEAvadK/9GUjXB2aW9pM8sTU4cev66OnKAdSsBbh7XbBGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"883298db29d2721aa4f0f2def29b097069d8883f","gitHead":"6d3284da95d7cc6d35088058cfba82d5d00b8cea","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.20.2.tgz_1517320542161_0.7811231347732246","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.21.0":{"name":"rendition","version":"3.21.0","license":"MIT","_id":"rendition@3.21.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"76d3893b698700542d994faae6f2baa062660151","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.21.0.tgz","integrity":"sha512-oPAL0kX4ymAP7JZTfYj+aluFEMf42cBYYY8fYwqwHX/yKAW46OjEqnyjj8KAidnBQTUSwsEj2LPPJ/kO9QdUnw==","signatures":[{"sig":"MEYCIQCcMGmvBn2zrm/KMS5Iu/4ixQcYoOJfgBo6VezHL7schgIhAJRyNVpHWFZtncCvsH4hM0rx6Ks15xzp8ZJeE/8K8Vsx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"76d3893b698700542d994faae6f2baa062660151","gitHead":"bac62376f11675ef7e17e73d16eca2b45ddce9e5","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition-3.21.0.tgz_1517396458550_0.4390291036106646","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.22.0":{"name":"rendition","version":"3.22.0","license":"MIT","_id":"rendition@3.22.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ca5b4177bc2f7cf3b8bfa2810034fc541aad5ca0","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.22.0.tgz","fileCount":107,"integrity":"sha512-+BQdZssVOHvEXvPYu3nIrXtJkylQodJ9fqGL+TH2VEk9HdT2Z0Zt8cIyepfuVCCSNORoUAPD2A1xdfM5BIdD7A==","signatures":[{"sig":"MEYCIQCefi2j4PURQ/gxQGpgzbCOZJwEgWSFszPa9rryT5kFwwIhALAW9o7apzaobTlwVjIi0TvkqSMb8bj01uG8jFV2A/E9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4848139},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"ca5b4177bc2f7cf3b8bfa2810034fc541aad5ca0","gitHead":"ed9ada3d4ced4641d97659aed1f275edd3808cfc","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.22.0_1518106041769_0.6038785132767173","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.22.1":{"name":"rendition","version":"3.22.1","license":"MIT","_id":"rendition@3.22.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"10ffe4bb0aa1b225ef8c8741a51da0e5c46c9ada","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.22.1.tgz","fileCount":107,"integrity":"sha512-zRF793zeDQbcyir0PIkCmq/G2Ou2ohPanDKWb7QuTTqckjOzhBdFdkrDclsjWn5p+V+stXII6VJSXCBz7bDEMQ==","signatures":[{"sig":"MEUCICRqcS9/qGbQriv/CeswVvPH/u3zkBsxYpHNwE+5fA38AiEAzekm5wl6OwLqv2z7gdkc+tUqlxAdtjCNNXCSIOgvTBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4848239},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"10ffe4bb0aa1b225ef8c8741a51da0e5c46c9ada","gitHead":"4d4a60f455b92faabd3e4b94bbe99a8f2ad0c1b7","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.22.1_1518108851574_0.9564913715368166","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.22.2":{"name":"rendition","version":"3.22.2","license":"MIT","_id":"rendition@3.22.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"26f5f55b5233a8966c794363b2d21001ffb2a804","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.22.2.tgz","fileCount":107,"integrity":"sha512-8D4vVUic8RQLvtMsagOqzcbXOxwNCEYgc9I4WBHJs5ScWixzYZHbEAN8Jz+qVu6o5npe8YTywlHHIvzkiAoT5g==","signatures":[{"sig":"MEYCIQD7sy/z5fxqmDsXUgyX3yl6wiZbblcOYjDd2n/Q7VCBtgIhALtxbAlrJ4rBNVmfwPQtzj25gSTBsyN+Mkd3erIz+/S0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4848391},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"26f5f55b5233a8966c794363b2d21001ffb2a804","gitHead":"fed887729c714fa7ce593b08ad96229d7898cb6a","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.22.2_1518169045950_0.7856022505314137","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.22.3":{"name":"rendition","version":"3.22.3","license":"MIT","_id":"rendition@3.22.3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5f7fa059bf575b57225bbb873bd14fd52526de77","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.22.3.tgz","fileCount":107,"integrity":"sha512-1AsK1/AOIRMEfVal5VnFNU+otBYRA1Uutb8wwd7tBjEmgJyxotVFLPJ4BGJypol/iln0Lh5rU15qheByMMrCTQ==","signatures":[{"sig":"MEYCIQCVzkzyiv0YIMNodgCCsNw124abvJ3MiipK4QTXVBJ1cQIhAOKA40ZCfTQ45KV+aFrWwic/mB55LJIDsQCTcWNP6vZ0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4849420},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"5f7fa059bf575b57225bbb873bd14fd52526de77","gitHead":"0bb3bc755a659aec2a5446eea6b00555c25d85b0","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.22.3_1518173471013_0.48827812073800647","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.23.0":{"name":"rendition","version":"3.23.0","license":"MIT","_id":"rendition@3.23.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"73b1012ff406b7a40e3a8d2f24d039029a2cccb2","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.23.0.tgz","fileCount":107,"integrity":"sha512-lEJhTS4Kg4YsmBtw6jcZP+dAHJhEn1pPHXW46ERC+JvXxPmFcyZytjVU2i6a5l0rqLTSRC8+tpnkTHc37xlASA==","signatures":[{"sig":"MEUCIQCCleVV6lonX718Kt34AlPNBtF4cXqxsHH4HPIDU4btCAIgPRjOQvpXHbT2Iuwtx58IWROSQcnfup85QLLSF58MWaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4852134},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"73b1012ff406b7a40e3a8d2f24d039029a2cccb2","gitHead":"be26043274259b9815894efd8e18a928207a5b35","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.12.3","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.23.0_1518194048166_0.5440290145456457","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.24.0":{"name":"rendition","version":"3.24.0","license":"MIT","_id":"rendition@3.24.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e02bc58f57ed0f40ba8e4967ad01a7dff9dde9e8","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.24.0.tgz","fileCount":107,"integrity":"sha512-/Dkm2BE2F/j6qdBkMLd6ALMYJf3SXW90geGX2wCquuGTaQ7jmZ++KlgeUeBi+LObVHDlTIp2MEvApuRXX8TEZA==","signatures":[{"sig":"MEYCIQC91Bx2DifQOpxvQjhq9q16QjJjKhx880C3i7DizuStDwIhAKsRRl6e52yjEli3YEebo99OYes8KhZSCACoHm1DCNpG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4855007},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"e02bc58f57ed0f40ba8e4967ad01a7dff9dde9e8","gitHead":"d1878f135513ff6e47df10381bc035d9e3dca6cf","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.0","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.24.0_1518692389372_0.5231345176707416","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta":{"name":"rendition","version":"4.0.0-beta","license":"MIT","_id":"rendition@4.0.0-beta","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"14acc45820ceb2fe8b8d44b5937622f2cca43250","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta.tgz","fileCount":109,"integrity":"sha512-Rx4muS5FnUsBw+yIuf+EKCy0KSU1KjBZxH9tr1RUGIIoiAondm2MNWPx60Z2COysJkQQmyJT0IRRvUWIYncVfA==","signatures":[{"sig":"MEYCIQDooaOXKcLUz7gtQN1lvqw9sbrh9KNBIZnoXncRF7J9UwIhAIdJdzUrbn65moZuwIrMdjx0nW3R2seb1eLyqzksAkIY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3794204},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","_shasum":"14acc45820ceb2fe8b8d44b5937622f2cca43250","gitHead":"c03fdb13567fcf2d290e90d60e51b588cf104d70","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"4.1.1","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.9.4","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta_1518721280438_0.6306745458029872","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta1":{"name":"rendition","version":"4.0.0-beta1","license":"MIT","_id":"rendition@4.0.0-beta1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b99b15d3fe19c2166a305f8080a3cb0a4609964d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta1.tgz","fileCount":109,"integrity":"sha512-LYOhmXE2G/wUlNK7ZUQJ7gSsNjPSa05V1CZpZCvLQnkT9uzUBi6JJHlu2jTcbvNDUumc7f6Zwy3O1UQeXb/zEg==","signatures":[{"sig":"MEUCIA7IfcopHnaHQWc93EzT2HkYUPvvvB9vSkybLxnODFH5AiEAn8Z3TDSMp1Z7MZfTzmph93gMxhrneR+0etPUMgpyTFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3794204},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","_shasum":"b99b15d3fe19c2166a305f8080a3cb0a4609964d","gitHead":"59ee038682c5b4513dac762c5c72af4cc65c3c9d","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"4.1.1","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.9.4","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta1_1518776059193_0.6354341452102139","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta2":{"name":"rendition","version":"4.0.0-beta2","license":"MIT","_id":"rendition@4.0.0-beta2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"7d89a62d5a7ac67aebcdb3678d02d86a016b093e","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta2.tgz","fileCount":109,"integrity":"sha512-1uiZgh0F6+6jNNPVgcT6Kcn/CnyC68zjf7dfoNzbdfRQ3kZTM2GubmqR7Zb8rG7uKDFu/Su1mlOjtUrGuxZk4A==","signatures":[{"sig":"MEUCIATgSHIIfN1pjoLv7ZSm/mrTPmMLs7J1/bovJyTxyEQZAiEAzadjVgIkRh3cDjvZQzrm6O1dKcf/O4tSarPLXneI4pw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3793841},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","_shasum":"7d89a62d5a7ac67aebcdb3678d02d86a016b093e","gitHead":"390ade267991f8e2893db1a1822cbd8f776cf4ca","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"4.1.1","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.9.4","dependencies":{"color":"^2.0.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta2_1518798650286_0.43075210185051205","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.25.0":{"name":"rendition","version":"3.25.0","license":"MIT","_id":"rendition@3.25.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2dc461465d676b198b83a8fcb31fe74913077c52","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.25.0.tgz","fileCount":111,"integrity":"sha512-QLYV7HAL2+6ehKX9NaAbUrkz8TjkKydNQ4XfZycEAZ7rlmRs0zZBahHHVn2lSVB/n42ANvjzxPesxAe8M3L8YQ==","signatures":[{"sig":"MEYCIQDUDc/1Y65ozTn1EfCJV+EhPLTH1Y4tSMTdu2m2P7XryAIhAMCCtCVH9kPOLZ6r6zZKvkAyp6wV1k4Sp/3EeN974pcP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5197241},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"2dc461465d676b198b83a8fcb31fe74913077c52","gitHead":"6539b79e6d41e1f9fff8a1cd4f66e123df4ba25a","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.0","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.25.0_1519379343640_0.7468373395678536","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.25.1":{"name":"rendition","version":"3.25.1","license":"MIT","_id":"rendition@3.25.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"fe4d40646a1ac53916846b808fb2965edb039754","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.25.1.tgz","fileCount":111,"integrity":"sha512-ZuvWsJb8vxylht8pxsH1WnfN3+7LdUBDdp8HM62wzWeh8TeCn7+VfGuytTU5aov/Ue3JseY+AFuW20pDpnKOqA==","signatures":[{"sig":"MEQCIH13Xuwzx6I4QbFNMjrq+NIxvdpGZhGF4HDn+CkTLn/HAiALQvZcH4OseFRiRUnliIJzw5xEJwKhGGPcmRnU4AvyjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5197443},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"fe4d40646a1ac53916846b808fb2965edb039754","gitHead":"419f409a50134604677b90b8a7d7eed9a35b3ce2","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.0","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.18.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.25.1_1519384402998_0.7549597359701012","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.25.2":{"name":"rendition","version":"3.25.2","license":"MIT","_id":"rendition@3.25.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"80457432cf0f7d6536429783847affb014fb212b","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.25.2.tgz","fileCount":111,"integrity":"sha512-d36n2R7jaaS/PXiTOlsE3JhpHM9Kaln1rYb6y8+aYFV4MPW6GnXxnE29mBsLzun2dODhxHBdgoJo7GIKSo+iMg==","signatures":[{"sig":"MEUCIQDDiOA+Ply8J//fSv/z2tRYqvILaNaT+81EAehBPW4+PgIgbA5mjYIPZi/mKvnatFcxRXTm/IZx6Qs849QcQ5bPv54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5197534},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"80457432cf0f7d6536429783847affb014fb212b","gitHead":"7f16a5d8be405f1b9807d3f254b10f77190f183f","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.0","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.25.2_1519589740500_0.6159881771473403","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.25.3":{"name":"rendition","version":"3.25.3","license":"MIT","_id":"rendition@3.25.3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"22fff8abdefe036f266e80ee7d8c6f2055cf4d6a","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.25.3.tgz","fileCount":111,"integrity":"sha512-nNdA0g1vB05WtBHk9ooXY4nJrbZPanDx9B8PpsWnyN3AHnsNJhFwblE2n68ZDA/H0FOf1QzWpXhZfq69pdrkCA==","signatures":[{"sig":"MEUCIQDaVEQvZknRHRjiUMw/WVoWzRjPpiGWkZDqEC7vNVarDgIgev+VI6SAb3rXHNmU7zeZSc9JpbePxxUoE/uN/c3a72w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5197907},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"22fff8abdefe036f266e80ee7d8c6f2055cf4d6a","gitHead":"5c2e2c4166d18846ca1eee46cd45525901eebeac","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.0","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.25.3_1519639352042_0.8504856478675722","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.25.4":{"name":"rendition","version":"3.25.4","license":"MIT","_id":"rendition@3.25.4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"143ccd22684750d866c7437a4fbed5bed5d2277a","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.25.4.tgz","fileCount":111,"integrity":"sha512-NsHRTgWwd98qPFZe2P/xEBAJvScIbwbI/qn1K97T15YnyHH7Er0KxC9yFcG2ajJoVetjZ81bjrY5TRQ8QJeRdQ==","signatures":[{"sig":"MEQCIBhemJBsTGwakYwfKz8sdsPlZyIh4zyfim+6sIRulNcmAiB+/0eq11QnpotFEtoto+tKDK+v7aX/gqbPLPLhAiAaAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5208931},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"143ccd22684750d866c7437a4fbed5bed5d2277a","gitHead":"071d535d7f04f17c9534b67d3628d06026a72bb6","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.0","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.25.4_1520243546375_0.5502143591803805","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.25.5":{"name":"rendition","version":"3.25.5","license":"MIT","_id":"rendition@3.25.5","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e15d6c9ed84b7e22b89c72aa9bcd92c1577aa2e2","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.25.5.tgz","fileCount":111,"integrity":"sha512-muGgbkDaa62OioJQlg7BB86i119BGGswkYUbfH2bnRwHarg1vzRXwiTat4tVTEEVXNGgaHaGLf6OW4rSR2haow==","signatures":[{"sig":"MEQCIATMrIFMe8xcQGXO74UqiUGWfLDeaKFAZ6fVXdCMo0WNAiBO5UmmKNuPTWGHtTs9lS6eVj5XFselt3gj8kyrYZqQ4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5144332},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"e15d6c9ed84b7e22b89c72aa9bcd92c1577aa2e2","gitHead":"988d5ea55a5ddf03e37dc493c268ab6464349e8a","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.1","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.25.5_1520525031839_0.35714100064090104","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.25.6":{"name":"rendition","version":"3.25.6","license":"MIT","_id":"rendition@3.25.6","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"427e7e4ce83dfb31478ebec281b28216f7078ce4","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.25.6.tgz","fileCount":111,"integrity":"sha512-7qr6RLY7zpj838mf/t1uYxdTAQx4CT+1dkdEp9C4NM7NML//xm+OY0WINOm3UXVNANQ6EK+AJmfp0lS68QQb8g==","signatures":[{"sig":"MEYCIQCGJ52v4WFjVopj1TgKk1nHCQ+bwcHodBla8zZodimpeQIhAMPVEjhQKWqCXmmn3AljPh1LBikqvsrJ+V/HhuuSMoIo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5146643},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"427e7e4ce83dfb31478ebec281b28216f7078ce4","gitHead":"fe1a51db263e8380c931b28c720bd8b2bfc14fb2","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.1","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.25.6_1521031633042_0.8384684121407713","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.26.0":{"name":"rendition","version":"3.26.0","license":"MIT","_id":"rendition@3.26.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"7dcfdb229894b0d8465511606d23f156d9f5990c","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.26.0.tgz","fileCount":113,"integrity":"sha512-NtPwvRJijcjuavey5VZII1Ht2RAIQSIcNSaSCrkD4DKnNq4j1d2k70DnKGeHP4+RBy5/cGdtqLaynrtbX6mA2Q==","signatures":[{"sig":"MEYCIQDWiEuX/1QXDV+w26IMoDtjJxBSj8A3kz3W883+dH+L5QIhAPjLWyj8YvFBgv4QHAsfbCMKtQ64sv0qjjkMno7YCx7s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5157942},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"7dcfdb229894b0d8465511606d23f156d9f5990c","gitHead":"517318419cf4b74876dc2d2dcc6280ae3b680998","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.13.1","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.26.0_1521197372476_0.2299078885479191","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta3":{"name":"rendition","version":"4.0.0-beta3","license":"MIT","_id":"rendition@4.0.0-beta3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"795fc38b506b791f406133d8391d5c969c6bcb11","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta3.tgz","fileCount":124,"integrity":"sha512-BhnNEPp3DS7i7h8Afj6SQ/TCQpCME354Vvadh3NRccQuZggg1l5hQN8xZA7Wa90bKwT5TrrP6kC4fOULRyCVug==","signatures":[{"sig":"MEUCIGr55Sytfny4PQvTI+PimMSLTsxGLoPT2BjrVYPX61yzAiEAwfhyRKSmVaNNrfog81J48AI7RfiUKsUObrBIkFTPcM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4270973},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"7163c5f2d97c43e9efb5994cddfbd389b320681d","scripts":{"jest":"jest __tests__","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta3_1521718561580_0.14381856032264095","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta4":{"name":"rendition","version":"4.0.0-beta4","license":"MIT","_id":"rendition@4.0.0-beta4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"435bf5bf7e4fa73e3585c1e6da62d1e7cb5bd845","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta4.tgz","fileCount":124,"integrity":"sha512-uXh078vtaot+YFHwLdw0/5g9wg1DQMifFcO0scL2tHM7l2DFpW6j/B9sjxNfqjwk/E7aYhhmsNo8Ce93wYVLpQ==","signatures":[{"sig":"MEUCIELQA3J7YaEzyxW9P00ya/5pDfpQTq1WUUDyozuRTsMbAiEAyk9byUEJ0YEgPrJdfkjKgzg99K3pwgotX40DHMmzyWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4270973},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"b20044fa13e508e042f2c968b1363a47e5fd05b8","scripts":{"jest":"jest __tests__","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta4_1521727991806_0.7431067297531417","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta5":{"name":"rendition","version":"4.0.0-beta5","license":"MIT","_id":"rendition@4.0.0-beta5","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"23cda28a66ccd3c5dc2a4309f5d7228632e7fa19","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta5.tgz","fileCount":114,"integrity":"sha512-ZOP8phuUg33Wq31Om37j6nMVrqWQAxXpcWY7Mb4vczSteL7zxAQZgWKhdhYq0/2FW4POth2s1ctRg6hT16/8kw==","signatures":[{"sig":"MEYCIQCTUoFGRZLzHvKrjBRGoKTAiZstu8iMdlpnrZdqtEv/kgIhAKR+ewdEa2JogJk1/XeYOQARa9IytFJUyMRPHqN9kQed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4291758},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"5a5a7b0603ed869e914d71b2e921a863679d8ed3","scripts":{"jest":"jest __tests__","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta5_1522302579962_0.9039051593322922","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta6":{"name":"rendition","version":"4.0.0-beta6","license":"MIT","_id":"rendition@4.0.0-beta6","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b05c52df6a09d446948995d8f258041a22345bac","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta6.tgz","fileCount":114,"integrity":"sha512-e0lp/Qnv3NIDKrhPNOQNJvQaDw6UI4Ohndyo9H6sGQdzFSfGlFV+wk5leZa1sWq+YyzJpd5VbTGEoJy0F9iZ6A==","signatures":[{"sig":"MEYCIQCRJ5eTqUN04dvnWb4f5q4jqPfrqrLy/IjlU2Wp9xLgFAIhAP+27sZ1Y3jxf07lzaEtEm8uwPKBaeggyzUvbk07Okg/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4291762},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"7c4a34135b33f0edc9565dd0f2dcea652d435f61","scripts":{"jest":"jest __tests__","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta6_1522356058111_0.2257668494842695","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta7":{"name":"rendition","version":"4.0.0-beta7","license":"MIT","_id":"rendition@4.0.0-beta7","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4d213e22562b10aaa8f07b4e73aad71809251ada","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta7.tgz","fileCount":114,"integrity":"sha512-tMxouEQ5UA09GoTBSiObxMrFCNWLBpXd3lZxt3oOWCSUVeDxxgguXxgOFgrVApoPkdqR4My2bVowReZN8hMc6w==","signatures":[{"sig":"MEYCIQCiIa3GtjlrWHAP7ktnqLkyItrLRYQ5zn7oyVSKqvSEhwIhALU0thCC46sE9XLJ7bOAxYWywq4AByU28XRNC6Yc1/vU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4291799},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"f0d3d03a7652f4c5f4e272c2e3a36eaf1806c9ad","scripts":{"jest":"jest __tests__","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta7_1522357294539_0.7073891070970233","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta8":{"name":"rendition","version":"4.0.0-beta8","license":"MIT","_id":"rendition@4.0.0-beta8","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e66c288874d797a74beb876c12babbf414f06000","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta8.tgz","fileCount":112,"integrity":"sha512-koIs21gysFYoxea91NbGXiSpO9OHXah4EL41bniWrv0/DTWpPidgCgylST7nsgU5X4BdMG50/H31DASMze2mRQ==","signatures":[{"sig":"MEYCIQD2WbrSwbGZQEMj2eChUrluOLfXvfHf7CHZAoA1+14uwAIhAIjoRSoSanK3qTdHea95s9SfJNNSABkcWopnZ0WFKkwX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4269422},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"8433461b812915c662fb2a3b50f31383d79f77f4","scripts":{"jest":"jest __tests__","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta8_1522675096285_0.7512119613550876","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0-beta9":{"name":"rendition","version":"4.0.0-beta9","license":"MIT","_id":"rendition@4.0.0-beta9","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1968da837a52039d91a4bfb8aa18a3d7d17fc014","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0-beta9.tgz","fileCount":114,"integrity":"sha512-HG8M9knaQN81Q16IW5iEad+gI5qLjimEdKw9hJSe7P1w3hpzfEDefSrkqAivVb3FPpvIB30yO4wkWNo7Ji9eSQ==","signatures":[{"sig":"MEUCIQCD5XQj0KaP/8dRisrxVFC43FXBATCLg4v1UH9XkzRJdwIgF9VPghEPkUyD/bdpjKtUcsnkNbiWg5Sd2vwJmKBJV1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4277537},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"f4584a8fc7b8dcd823548a2b4c8b582c037cfcaf","scripts":{"jest":"jest __tests__","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.1.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.1.0","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.1.6","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0-beta9_1522679653262_0.41859011296424","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.26.1":{"name":"rendition","version":"3.26.1","license":"MIT","_id":"rendition@3.26.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"813dcf07212fcbfbb0a8d8dc0ee68733accbe743","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.26.1.tgz","fileCount":113,"integrity":"sha512-Y//88H+hQ09ebEvNEap4snpBngHeMwXWP6m8yo8533++6LDEoIXAqEn5WSjYH46Mbs3IsAi3crJJYoCClBcysA==","signatures":[{"sig":"MEYCIQDJztwv0/EHuUl4vTtqQ6n6buuS1VjlyZeHrKBE5W2IKAIhAI1XVUVbmd2XhS9XTqFA9SYAT7nXGppr+n6qVoZbqLxq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5180655},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"813dcf07212fcbfbb0a8d8dc0ee68733accbe743","gitHead":"0f7832c447052e3a58585fdc725c40e736e672a8","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.1.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.26.1_1522848111576_0.19689145511758244","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.0":{"name":"rendition","version":"4.0.0","license":"MIT","_id":"rendition@4.0.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"98177e8e4304cfde5af9c484e96c0df76e0b6618","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.0.tgz","fileCount":114,"integrity":"sha512-/iNMNUCQwcPmSCnAg12er5cZqaWHOYyhTS6eItKo43WQSv3AgNZMQ+vdw+WX42ceqHIsuKmdQJNPW14NvtBfPQ==","signatures":[{"sig":"MEQCIChJ5YtvCuoTaEinDql/MbUcyXyGdQ/qkJk/WQj/s4lyAiBJoBVWyzCPu3F5sDnR/3HMCrYwOTrQ7io4dBT2POkyoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5037751},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"98177e8e4304cfde5af9c484e96c0df76e0b6618","gitHead":"f8b11204a14c75ef55190d2c3cfd3d1eed1fce28","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.0_1523456457821_0.5696229009787146","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.0.1":{"name":"rendition","version":"4.0.1","license":"MIT","_id":"rendition@4.0.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4b53399d0844406fde69bf51322d51b8d78fb04c","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.0.1.tgz","fileCount":114,"integrity":"sha512-kc4CcY5b7mqyCSQT9Uzl6JOCjB9BEmQe//32DMQ54Btgo6gpkjlKS+1fgiu+z67BCEuVazlNj2+hSMmkVmOr4A==","signatures":[{"sig":"MEUCIEVUJrGNRIMwgW3MPLbXuWWYBsBHSJ2KWWRkIG++rOkFAiEA8fWV8USU8ougXBZyFv9pyWJ9Y3Wsx1PMYmzl+x78UzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5093712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1Ix+CRA9TVsSAnZWagAAWg8P/jcassM8rytcz24Y2LNG\nRB13x4wmauk7822VX8DuhkWHGVx7+hyORd2b9AZEjy8ZeV7FRoWVF1Xr97C7\nnwHce090ECpG+B/Yp1lLFwUM08LSnMgnXfOxwOs5zO5BL3q5URnLQA/R4wcj\nou+1DWnafR8H6jKlgOoPW6RDw2VIBciJnLiwjjfr4KcjYY6gAQ9UzN9RjZ25\nDhTJkceEXcAWyRqUbrG+V+KlAgd+YQj4rBy+tp6dRYFhIxEielJYFga5g7ih\nfNN6KWUsNeMglQyR6c6syGpbl93+GYqDi/aQjjzNtjVB1pm/kHy5TcFJoXVN\n8JsVyr4fw3R6+hKWzxD75EidR5vPrt0q8SgZH9k+A3aQVorsqQTNAqKm928J\nJ1b+J+d50mT+FnNkIE3Y4Ply8bMiW7MC2XrLSfou+BI4Jcga8FsPqujwx9q6\nL6Z31sJkGxOoV7/4ROr8kt5XmdO12XHuSv5hUQPXZktVYfrijkybztlK78OD\noPbr7zZGOZ2BWajD1bBIL54CcX4kXuze8Hg0F3UOW4zzhLwNEbHo4wN3eXvF\nb3KgYAeKKyRFwlp5LzkMQ5U0siQn1/4RTE/qsv7of1M4bh2o0pc0WQQD2bH5\nhr24uRmjATbXfk2P09VwaUZWjg5nkFVUCP3/8b8Vqvd4RqsnmfmmdB6mcGhZ\nPI2O\r\n=kud8\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"4b53399d0844406fde69bf51322d51b8d78fb04c","gitHead":"6fa0b2f60e1d2a1e9be8498ddf2d5511201bdce2","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.0.1_1523879036665_0.21526773918093967","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.1.0":{"name":"rendition","version":"4.1.0","license":"MIT","_id":"rendition@4.1.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d9c87f68720be2070cf2e9cc122c15ecbd87d8a7","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.1.0.tgz","fileCount":114,"integrity":"sha512-2WPeV9rTxq9evIivI8MyhKm/Ry5yBMbgwhVO8VFAppErsRdZ4nomhq9w3KdldtlMC2yRAPy2/yKi1y8YrTTcaA==","signatures":[{"sig":"MEYCIQDiUfMJdemP8NU/xVOlCp+AS9sRR9cAkh4Mt93VTuKhsQIhAP5bzQGgOMzqlJRgXQ0EZJ3s/v9xCUs5WWFLEAG8xo7c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5096208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1aXMCRA9TVsSAnZWagAA8UIP/jJTPexYqDqMY2JL70ps\ni4rxaNC/7M7MIR6dJEYQcjr/ewpI8tnQyzLS+NFs1y11NzvYYs75R36QyCRB\nj5yq895q79fpkK6ncaPJPRBf1dELsQFHNatZpoyOK2htc6oAu+8MfO9H5fgh\nEyV7v9wo9IZFrY42gslq9TtIbq/XZsScGArA7B1acJ1rpNOj9ghv5CeitZg/\nkTtoL7zYwq6cH9PmcuBGAsHm/C/HZLH+iuyxMWwXOUbo9+5PDwLHfUU7yAWr\n/o2ww5REaislc5Yi6+bOT77gNrxzh6lGKq9i39uijf6wdv+bAdCknJ28WG7p\nr54e5TDw6Rgx/5dRnCG02LBls16UzLFmg7dsrU9ZfYL4c398Epzis7dtPBW8\nGihZLV39aGbNx0lGIC8ZGT4wQEvMkUSiWL9YfHFe8DDQyK+Z5wdhsEl+Om4f\nBjgopBM1lZOCjK0wbkY2uQg2q8W8q+hqr7LdPPuaBl46AYDfk6hsjqW27HvY\nRpXfqvklgleQ+RyFRx79pab+OQq/tGSd9LuEneX8QSJ0k+4kXCyEVwYQIHOm\n/m9dgPl+Q154R5XwV6AWMnZ3jCdCtqkPae6r3HG/HyPUYweKVTMwQX2rxMG6\nYuDvX88KlUbgMU8sd5zCQSC9RJycE1r6abua93D/Ph3IDEAFuhrONjs8Zl2c\nmS+k\r\n=gEtB\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"d9c87f68720be2070cf2e9cc122c15ecbd87d8a7","gitHead":"0119f95ab63d283289ee051910a5d00c007db1cc","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.1.0_1523951051614_0.36288289765266724","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.2.0":{"name":"rendition","version":"4.2.0","license":"MIT","_id":"rendition@4.2.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ce20177e700c69c9747154ff455e982044639c7c","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.2.0.tgz","fileCount":114,"integrity":"sha512-ANF4/WR7pCytmnF6KJnJJEOtz6etos1AY6Sk4pAwiHbB397qbYm40jlRBkleaaMb+QGK6REeXSHywz46g5UAlg==","signatures":[{"sig":"MEUCIDWOEoeSG501inSvLIzj+eJRiVPI/yxZqTWzoLwT8BjcAiEA5uPJg85jivBZSKB29CQx6+5O05o5LH3K7q1Sy7d+kUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5126643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1ba5CRA9TVsSAnZWagAAxroP/Axja03wU7InnK6Qt794\nnkL87P68lDX29CM71L5/BaFsT3d+6o/pmMaGzKSULWCHBQ05LPtu4JB/ZSOo\nm7C24bEH+qiWHcc9QizKcu12pgSc2XBWZNpUscUoW5gCMWaJHGZvkLL79+Vu\nPCb+G7QzSpUEbB32NQzkfh9SRkEvsp+O2PgYsAFyfGs4EPEjg9A+95DO7Xe8\no8WNsTb1G5cs/LRfUnylBdxo8YNuyOhzkz3qQ8Frw/5DRecQGd8eSkGXNytq\ngnGLpsuxouyx3vu96WcuO8joZNuNEw0aGDPYTj71QMTB3pEdkajwgNCo3cKO\nW1kyigZOedu+lHXpYp84RWSxu0N4InjmdR6p/lFK+NQTmJU3aI9X+xbzg5vg\nl3IuEYZ8v0kCYcwNdpqaxZspy8ohi+15lnQtC4LZUQlNhGES48Vp6t8RPZ5d\ng44gQ1q2+e9oFhXVFoRG52g+AHoI3DE/YHvpVWLr66t9J5HCQt9P8ktphSqS\n6Omt2UeN2Y2UJlrlGD8qklfl1TvswV/PFXrqfcohBEl+FVJ0Q20+aEN9twbx\nHz7KFlDc87THjZVxixgQFXPe45D8hNa02PUs9K2Wnnch24sv441yhbj/IiIh\n/HaiovCJr0fc6VvbmN//I1OCKeZJLA1pGzj+lQjWkevTB0H3ZhNzr2ZTCyzM\nnCP1\r\n=wJiQ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"ce20177e700c69c9747154ff455e982044639c7c","gitHead":"73f360d39fe13badb1128f04fa53c4c3fb8f938a","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.2.0_1523955384783_0.48684738720274967","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.2.0-beta":{"name":"rendition","version":"4.2.0-beta","license":"MIT","_id":"rendition@4.2.0-beta","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"23693841c538445bdc0ddca571c8ab3c9d5313cb","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.2.0-beta.tgz","fileCount":117,"integrity":"sha512-XlKJVPQV2skKBFF6axEkI7pDdvzuWjuK/bvPHtAobB+UP1yneWKPj+lowixOX/k05C8QXjQS5likY7kUPjOk2A==","signatures":[{"sig":"MEUCIQDcoXsVRTJjj23gKGhn2aZygu2OQCtwI746/85GE2gpEAIgHXK3iryuxHFfJSPiKYPAaphbNTpnsBur25+fgB1QkQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4343916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1bf/CRA9TVsSAnZWagAAXfMP/2gKOwMbhGClAuB+5GWx\nChVT81j0c7O+P17F4c8Ck318zFZ31MyXgEk1Wa/NsyQFKmuPWRKR1s8Zdqoq\nllA6Uqz4QKHtco0iv7+aRbInffHYP7oGjhv7mgCDglTsvketRHf+tNEWupn1\nO8xZhGeIwHaXf2mSHAI8T1OcmNu0oOwEAXSDWFKlnTDuCGME8+zjZV3o3/qB\nGnvLe70d7WmEMwnUSzBWi1w+vPJ35iyvAOxSkPGNovFCaJiRNKzZ+1bNfztc\nF6vDKNrz+92wBgOyoLDL5u4/Jn4OyS2P/kR0zaoCsiPgjuthjSrxUIenL7QE\noe6egEaUPMQXGY7qe9nll8T65cgLBSVhnOWFLzn0Q7x81766v43eUg/JMsgU\nCqSG2KzIrShk+vu0N6rmzVDdP8Cf5jVDQsfyz73lFbj1Oi6/iUkHiVO+6UbJ\nWQWUsyVzpsMYWnWBWuI0RPkvQt5rgTLoYlbvDxoi56fqFdSWhLuM3cShnR8t\ngEyVAl2eHit4RKHsQiKL4uI0v8BFb5lYBn6ybQCFkx31AOz9cXt4mfG290WD\n200kgBv9sMLEoN1AlypenIr6a2hGU+YCTDYH4mD2BPXSeJITTYahLUOxj+V4\nRW3Wj/hiJQ3EhoDWWXKxcSoI/L4xLLpKTTuA81diVo/iuR06Nr8gziYcC4RO\n/nXT\r\n=MB4L\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"18ccc78e7640af41d0077738491469afd915403b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.2.0-beta_1523955710295_0.7849511171963528","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"5.0.0-beta":{"name":"rendition","version":"5.0.0-beta","license":"MIT","_id":"rendition@5.0.0-beta","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"a4d9a0204f45ff86505304626f030f9d3024c15f","tarball":"https://registry.npmjs.org/rendition/-/rendition-5.0.0-beta.tgz","fileCount":117,"integrity":"sha512-yiENUn/dAVWj7dxOPW+jYCxUcx2aVM1IvY8TXYlt4CMQxYmMdioh6eXmHGvv/+BRLmD/EzzyJoA0slFLz8ZvqQ==","signatures":[{"sig":"MEUCIQDC/Uis+Mccje47Z3Fv2QIVNgToWDT5/9Bt/d0wpLBSpQIgfz9gwuLybp+yVHDeDE6vqa9tPzFseYaabnsK8FDfWus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4343957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1cYlCRA9TVsSAnZWagAANegP/3/qDGzZn6PWt2cBLpQH\nZWBHSvjRGNGLaGnshiNaMhW7v326vThWhBWcPCdUXfIhMGvvkZQ5vOrcNFhS\nv+eGqkV40sb4CxIJDwPiNhoTH3aKSp8OiAoMRTkcUbILEdRyXmOaz/ih0Kzg\n887ax4/9U04uCHh+ukvXTo3P8sK+jg7d/76sKSQ4OT8Bsgpg8BVSeBN5HDtB\nEVCETIT8JI9Nk06sY/eZEW4p8ISBeZsTUU65493xp+OIxjuax4AFL8zzH+o7\nFyGotdfoB9Jf0sRxnOsHxF5HXlfQ2qAe9x+0X0LUvegdquSAScHJvu/F0uZ3\nHGRaUnQoJFS4OJ0LX0FLg9AXsbszQfEIhCGH9/vZbKXwBsLowlc5WBbMWFDn\nbGLPonHZTNZYsN+ui3+PXDHqHv9JZaiFFpREg74MjSctpXgbIY3HxVGI0qlq\nEPx+5vrZWmfpvOOhYvJvHXiCdNrN5eehE4xIGu6vUdytjwM92FAXi5OTobcb\n/MuhkAbkQtn/k2eFWmXC80Xg/aC+L8EDknz7qoIuVl+wyv/sy/xAcNun7/um\nqK8T3Doe5OwnN13XVxm2nGe7X5aumNqmy3Nzvm50DXQ/cyI9FLXcXuB/mzDo\nCwoO5WtBqePdmD7zg1VKtF+s7Nbr1sMRh/gEmBXwU9mVz6Q3LzzNiySH5gZn\nZ8a7\r\n=vKgp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"0a86c8a8b5533220948584e5e0624504c0a95e8b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_5.0.0-beta_1523959325253_0.7755196764004231","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.2.1":{"name":"rendition","version":"4.2.1","license":"MIT","_id":"rendition@4.2.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e31ab67595102ffdbf01313579791f736a3a39db","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.2.1.tgz","fileCount":114,"integrity":"sha512-klFCS8Hx/pHmIx55DN/RbJHUQ0RMFNZ9R84gKLNBXciHiUvaswiCYx6fMd4TqfB0wP2reOo9+B8mRm2B/otQ6Q==","signatures":[{"sig":"MEUCIQCY1Bc5SdR2uJQkDoHFgdSARotfCzAH9q67kIas6KdYeQIgS0tJBEcO/AOIp8dwqezBJdWjd1A5zw3s0q02ZNpgFAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5126739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1ceJCRA9TVsSAnZWagAAaNQQAIW0QpQisG2csXWy9NtL\nHsrSu99ToFVg+Hy1lLulUGqMBkwtFO0gPrAfxfgI8Lw+SnyYTN5GL/oN+2Zi\nNr58xg2CYB4+Jqhi5jK/be4pcubXILqMqU1Pl1MfHb9SMhUZAySelzjCPpuY\nLdAEBSRUfltNzSLg8vr5w/70EePl0aUCNmqCbh+UXuR7N3atLJaZ98BBuytv\nJZtBu0Eh+IWlUh13Y3FNRwX7o8kaDhh48/1DsLL2EPpdXfPdVpvIlcp+VnQN\nBonKHXBLSe/pKLieqhKXZwwQYQG0KaDaCtHOQAeCCYpR/epl6XE7x6yY3pe6\nWkH5wZ1cmRtEibkFm9GjoDInB/P3f1QPuwNCl6+FhuzyO/5wlrefUETGkmCR\nBvUeOd0ehpWrSMt7t9URFtMF4GasWrRQ9TsLG/aO59qkAKMGzAfzzyAQHBY1\nmW6CVdTBKj5WX6MSpxSHkjW9nARHi9Wa+XG3HkynWsEycotdTTpakCDFvKI9\nNwHDCFr2hnIzDr4Kbnm+ymBSFiBV78jKHPa+7+w/QQKDw6Ay/9Y4XbSI55Eg\nLY7o1DampCMnrxfXjtzTvj99IDWXPSby6qjI43od5pENKbk8Dyn/wKCx1ZSD\n0qYmRmTylKwexh4gCp5xsqHfqIifHUYQ/I4gEc1bZu6aiAeFAfkSijtoUNLt\n1Zfp\r\n=Fbdf\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"e31ab67595102ffdbf01313579791f736a3a39db","gitHead":"84e419e7472edd62daba311836f63b276c72f843","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.2.1_1523959686737_0.3050138359850736","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.2.2":{"name":"rendition","version":"4.2.2","license":"MIT","_id":"rendition@4.2.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8c28da9b810f241976e74c11ce099e6ca90b1e84","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.2.2.tgz","fileCount":114,"integrity":"sha512-Sm8pb1YorWR9Os4cPKP+d3gN/2WjBoV5nLFf8NtDW9H/ZPOuTDcKUnMa2Wk8eHgfKDEtEFXX39fOfMtmN+Xg7A==","signatures":[{"sig":"MEUCIQD2G91e64lFWVoQD+nBXzx2oul/GiRp7vUx9k52vXm+DgIgPLVLC3pJAXiYaCLbLdTxhQFut82NTavZN/L/FiGHm8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5126873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1czaCRA9TVsSAnZWagAAXKgP/ROCGjLBkSu/Z8XAE1gf\n8WKTuvHgeKTnj5zKx3JU2SIftql0VDx652WUb1caqByykbNxVV37KGHaNucJ\ngeOjfjGxxFDaoDKkpM8U+m0HPO/dEPdIofDmUA1SfWcytVXLRij907tkWLoe\nVN3KTYqCi8J5P+fhREC73TSczd/fsLgQ0PlGMHH4rxjJBPN/8exVRz5ZTkJr\nai99M7lFsOkw7B+0gSIDtccpqF3N0tNW+q+XbTgGx72USboJ9IJZIYqjozY7\nFT8uSG06bPlf9AhmBSDjxMWcKC7s5pelDU9WF4HQrT7ZIlG6aBPQxHTr0kYS\nkILftaJJg+ZLMbZNsAUSFphGQ6qyBcSkKxQ0pairkFPL+e90cEXqEIe7LBmY\nmRdYntT7OA2tJJ7tCUqzcb/kJ0giCCy99+XmqaoZiCjaJtEEWoYQVqnoncWo\nGtgiypJkK3KdRkSFiVD96ocRKq/0gHGr4qENZjTJMm0uasFw/+6W3F61LFol\nFws8jfqEFO7taKYRd6aAajfKCTDpBNzKGvODdDjuzOfJ+MY8UhQ6xu3EXTQp\nfl+9XSj/kNIK0uPNO5Yc0XSPPtHSLUefZ1ASsrZzE87UdQ/jLwroXinPJV7U\nh8k3fYVkcgpgXSLXRzIndUZpuGLEeW5ZZGuAx4o9AZ7L6FAiRuR05Pk6gGNq\nRB8w\r\n=dkRw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"8c28da9b810f241976e74c11ce099e6ca90b1e84","gitHead":"6c1c1711c9bca2806960d94940204335f6458163","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.2.2_1523961049534_0.7883889293412258","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.3.0":{"name":"rendition","version":"4.3.0","license":"MIT","_id":"rendition@4.3.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"01e30cb04d23c32b78432445738a6fef84e24a33","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.3.0.tgz","fileCount":114,"integrity":"sha512-pDR9Qsv0dsxtu2Mhw0MmhRqJURmuQ1QzHzdk3PJVotBPnmfDGmcx0RCzZIvDsHJQOVXvOxeTvCyJGt64WngWsg==","signatures":[{"sig":"MEYCIQDhbh4ZGfu4DPtYw6iS2wyu+EBdSXsIw3pjSuml5jK05AIhAPzmHz9nj0l4EULXpd2vdgGgVkNyvaGbHmZtNDP10NIY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5130271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1gCqCRA9TVsSAnZWagAAITYP+gLJt393huMu8Gxsfhx4\n2pqMAh68heWcN3vXhpnyM1APjEPDqzncLkwYypxOYX7LRZ93Iikj92B4kZoc\nlQd4Oklb0GKikb96YLgaV2izkMgiWyZ1Fnd94Y0vUjOGkCaT7H9lsbdfmTY5\nQ6grTY3GpB2F8dL4TsK+ykDtchB7X3K0kKfOElgGbcNguJi1JquQZb18WKae\n2nS2tk3LVmhNlNvuQcmcKVShmerURdTJ04K8Hh9Hg+UP1EpRVhMP30tiIcJc\n+kuasbxT+hpWXLZ1JDadHtu5mi3iOy5xNrwPzTsnltUBAzCUvNIf1HMIetxw\nBdcxCw/y8EYH1H0D2sD7xDjLoURk4Qg36OmB+ley2xP8dSOes3DJZP/bp9be\nA8TZ/8Pb44oIGaRsEOB6xtqjZWIn80wem8h2PcA+CYVOIuFGc0BB/FoGEnZW\nzGZOpbI1a7+8ePRDFUxBeJSXG5bjkDI2mSPTt5byf4Dc/kjczRmCprnBOLgD\ngt11OS2pxDgvxqmZiJ22+v9E4gzqZ13RafOtSbgi9UpJbWyMKxDxcPu7IDAt\n8x3y9u8YkXs6CVJQ4uViP1Kif8VW8mXWaYDHV4uFkL5g8UFvuXBjWiAqOcq2\nKLJWsIKf12QhfpzlLvqGgVn9DGUsTJzy0jC/J6zePd/TuGiAgNvG//kV4kY6\nC3bJ\r\n=kts/\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"01e30cb04d23c32b78432445738a6fef84e24a33","gitHead":"fba738e69211bc6485279c6b0263da48d0b66f2a","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.3.0_1523974313053_0.6994031479673577","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.4.0":{"name":"rendition","version":"4.4.0","license":"MIT","_id":"rendition@4.4.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"a5d24c9b4c141d3a0edfef9a7f42b526c1195f0d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.4.0.tgz","fileCount":114,"integrity":"sha512-x/eSy8BJ3vyOAb7B+EYX/UObObzQ+A2ZlS8Lc/khZD4SI/IR7ZfMQBYYsPZecfHelZ9qzFKI+ztC9AOhR7NwKg==","signatures":[{"sig":"MEUCIQCtiDxALZViF8mf6M6GO255ljPVnxri+8oQtT6yHSI8IgIgFh1fUEc35aMBebpfF8QB8TmoCwpCSosw/nwaTWHqvq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5140704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1gbeCRA9TVsSAnZWagAAKpgP/if/zcqDHPEZvXo7MX9r\nUtTp+/JWOWYEAfc0J8MK/9ZjmRl1nq0Pq15SZTSo2+ka8Z6io/h9xfN40ZFn\nbo5YjQOWUXILLdo1TkKUH711hSLUiVwzkjjLysM1U+wNSsMgOY+kgzut/lzs\nNaNECMAJl+K1+M1JBMAM/pBqRHpHKrSAiFWaGDKorOXgcXCNE9oMd0M8LCQg\nSr9XSfhm4gmkv0+KysraDDED6XdlSo/8+5Pna0TpW0PlQJG58jEsvQcoIRp9\n6JnJRxIxaZSxzfGe6z9oyDQFbDWzkb2ba1IcCYTGncnxQtl1b1to7CY9QCX1\nv38PkGsbwHygvxX+niEF0lDgBz51K81/TaGLsV6M4tDczopepqqoQg/e7E6o\nmnDnuu6MwOemzfPgyazSgnOgh0yglgtW8OycPfYUa5HadNz52/iEDVNoBSh4\nOxmSIZE+oyFkkdZrkvOQcbrwXppf8m3ZiqYMVUjVBKIpS0uYTj3AzL/Nq7sF\nOKAnI6J9fxoC7UOI0+3MhBjEZCrITS9cKrwLYgQxkiPlseLaRoeCJ/BkQv1g\ncD2ZRDBHs5DaLdUfaoST7v/34WSUWZe0eR54aLvsYkHodayIoud/ZBNFM3JR\nwWmEMOG7qiG1zsqR8uyOLA6jjPMwkHxfV0lpGQM7xJC6RViVW1t+MCs365d0\nCCeD\r\n=gOtp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"a5d24c9b4c141d3a0edfef9a7f42b526c1195f0d","gitHead":"8074baf463ba5510b54396e43d53558d94102ba5","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.4.0_1523975901461_0.7154638916232618","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.4.1":{"name":"rendition","version":"4.4.1","license":"MIT","_id":"rendition@4.4.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6480e4aaf81417e85d1bbc5cb199ea39197b3db5","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.4.1.tgz","fileCount":114,"integrity":"sha512-KoU63HI0pYHhaqjROcm+mwEoOPUeZxOeqZWxQ6wQduj7g9vxZoRbb18tLuppczD/qGwHNIxLxOHqCyNzncq3xw==","signatures":[{"sig":"MEUCIQCUVNmHtPG2Pp1Dv11nHYPADl0PCNizObDxN0J8YsldgwIgQP3CMbycSxIN+1cnU65QNUmbDIkBEhEc7KX8ZEk5Xl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5146571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1vDYCRA9TVsSAnZWagAA06gP/jO/H02svdySVq4sp16n\nH7o8uI7TI6W6gf2EjVzMhokyTMXdYZNFFRRPREj1X8jLUZ0aVz7LPXg6yqJo\nzln1JXtBAuQZV6Q2gP1pXGU22MmdjZgTFLgHqNh77afvJwjCfdyPWROWrQgf\nKPRNMUiP6wI94p1/eMYqZ0qA4UT/Px+5NDXfNXbiG6vmc9JeB4mW4PMOXDbk\nx6mFliSiKflKC8YtEGy7DjoIYa6iIX1sVoQG8dVtrXsR/mBaTSp9zTK7Npz3\nBd2O09GW+TUhKVONXaanlrayYoIdsG/Z5GtDG5vQdIYXTFq4Fw0DMNjJDATU\n7VpqhbI+wY0T1qNctPDbBoh1Jneaw8e3v9GCghvReMGuxZSp65j9SgD44aO4\nfaw588K5j/WoJwapMwNgnxNhyfVt65bTynnIvMGKipLfvT65c4c9bl+sm2fY\ncT1WPegZa7VE3EHSWPYy+2ygMBma4HSIn/VzidzEOf7fmVJY4DNNUZW37Rl2\nknx5TuCywlYYFF3kHr6Bhw4bOOmthbWvaNptY4xYKedRnUr1/G1ac8k8Vjb4\nYww6rLae33qvXcew3Qn4RwcI/MJVPlf84oj+D0cmjyY3zNgJFiHEB3VqDfia\ng8zzF3iOjAL9z3IClDZjElw2eDW1C8Cc6t9XpSiXNAdouKVF3Rq9TTLlu7CJ\nTfLl\r\n=L+aO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"6480e4aaf81417e85d1bbc5cb199ea39197b3db5","gitHead":"f19769c43afb333dec55aaca423329157ff2035b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.4.1_1524035799153_0.9874419718340497","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"5.0.0-beta1":{"name":"rendition","version":"5.0.0-beta1","license":"MIT","_id":"rendition@5.0.0-beta1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"49257dff533554115455fadf389be82b77dc3e9c","tarball":"https://registry.npmjs.org/rendition/-/rendition-5.0.0-beta1.tgz","fileCount":117,"integrity":"sha512-20MAV74AnCVIv0EamrIzBJbwUkOWkYDjhjV0eNoGdtYxV1JDz1Hx/xRq+9wgsuXzF5T4pEbshGtvv/V2NWC20Q==","signatures":[{"sig":"MEUCIH9UOfO3pBIIZ+jsZVONdRQ8uT7mvnnrevaSCPX2/q/HAiEAhVOFrf6kSrGL6yDRkzkPob7dYB9LRqMCmRLs6ud1B0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4337056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1xUaCRA9TVsSAnZWagAAHd0P/2wyAi/spabOQ/imFwlS\nTMl58gkZCmnXDa92HTCnz6ThvTZ5d5xnKWLlg4GDgD8aXJUea5L5tVUXJ6qW\nqpMoLHO8OuqfXSWrQMcVHtiWB4K+eqO4pU9yPf9+ZgBYGe94L2viyPADhOxN\n3AuPqmPLcdRhH1u420kXhoEzx28SZdEoazaNRc8w3S68vevP8HC6l9bgEHCl\nMsh5spuYdKyZGGxUhXLKs/gzlejmXj9j9/wdE8Vw1VA4tg+Jcs/0RdI9xo4q\nALG+TxQ/GX+CBvla78CqnPGPwscpbLxqnQ9Dkm2Ql7svC3CqrbnkY/x3BF19\nfrIfyagAnXixlqyfsnaVJbRtfxjWJvGLUBcGw2QGiDGxiI1GN1d76eydTYrr\nGz8xmSvLEviMPzmny2lBcjB4iBbVtbf3cq5bl9lX0pw+LoNjIc13dhw54pOR\nE3eioHkIdx5Vb5U7As9fz1iMoRDm45T3tt0AAg7xr8GubMsR1qoesCX10+KS\nwMibJX8DNDPGdCZJRCPLF+I6iCHr7BklJmD4ODOCucvQzzD6Eim94qE8lwQo\nQyeZXWFXOJ4GAnrbKSRXTePqGlOzCphl4UQa/SvhbnrirEqVsPfVgrQOfyG9\nw2XQMELA3VvQFtiTGqTKn4eFnByFo1v1+BmnTgvneYdUQ9OZ+PN/3y1r/jX1\nUwD9\r\n=ej7T\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"jest-extended"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"6fcc0b42a4596f3cf79b723e7face671a7fa4cb8","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","jest-extended":"^0.6.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_5.0.0-beta1_1524045081932_0.2179475907501045","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.4.2":{"name":"rendition","version":"4.4.2","license":"MIT","_id":"rendition@4.4.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"3ef68044a2d6d3207374813c69285e5624095092","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.4.2.tgz","fileCount":114,"integrity":"sha512-eouHT6phl7gKiN3MsANJVsMqEDGFJvrW7KbEnyqFqs4OefqKd6KDzItix+gtjhQetl2YDFrhBRCgiSzkDayeSQ==","signatures":[{"sig":"MEUCIHnKGa+ucYFT2mW8GfFYLmJOInDkNV4SM1LL4LyTKr8ZAiEA6ZVSiOC/DZXMOlHlzNADxnQAsVyZO2lEzbzcv5h7jcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5467279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1yVhCRA9TVsSAnZWagAAvegP/j+h/WkzUnOuMMIZ5Zh5\nOeMnWBAR9kk/2My5qpZJyDAEaIWEVJN5TUE1KCI9y2Il3XVUVOTbdFa7xZek\n4h7UmNwzukNfDFPvizSEp0h46hiN4M5es2mHW+ZCl/g/+NlMHqNDJkrtPNZB\nce5kKxgWLQygATrdQQBNtf7QuiYZzq+9mR3sS11XzrmrcL083ET31HUTUygF\nH1l+B8k7Hdf3UbaRZn346F2TKYZzHI0e7tCxYowqxl839Oq8UDdUF/K2pUDF\nZN/xP50yWdnhgpj6PYf+elpYYPlj0svSA2sEHtuKO/IMmStnIqKBy4BNUkZs\nwgsmx3fRqk8rxKP9RBN3TY3a7ZFckpY9nljOKlOqgBMdV+piXC+Sg06IH6Vz\n0n7CN7ZW0Z2e8Ze7zPH04YnUCFBHdfFXOCnt7Pw29FjgEzKs1nWemb2ZfYLT\nmyfL2wMiwcxkCGE6qxZXZktwyUm/SntXOceNe51RD0ZM+cOaiQ4jChFyMoq9\nBeNjjegRik32NysVBytg6E53NgEjT2QwClwFGvnlpOpI5jWaz18Cxl7uG7zT\nZFUSxWpuANvcQF7IgAvvZZ2qk4Xnn2GwTG7VnkBAgLPziyyVe6HzUZtOKlzd\nNbtGFlAdItaomPqDTy2ZG+S2rQOeBgfXqHEX6eLcRVu7x0hYciPg0o1tB6JN\nBCh3\r\n=0DNw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"]},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"3ef68044a2d6d3207374813c69285e5624095092","gitHead":"97a8836c004d67adbf86ec00e2242cf71d767973","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.4.2_1524049249108_0.08072928119790124","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"5.0.0-beta2":{"name":"rendition","version":"5.0.0-beta2","license":"MIT","_id":"rendition@5.0.0-beta2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"9b2b562d0079dffb15bc09745b9489a87eeaae71","tarball":"https://registry.npmjs.org/rendition/-/rendition-5.0.0-beta2.tgz","fileCount":117,"integrity":"sha512-kAH6K3qeTyHI3Grv48ZJtIVBV7ndtVUydQbi92NEIG1SS2mLqwDZkKSRXUQYgbo2J9ExyEV92LOXvV3P7QDipg==","signatures":[{"sig":"MEYCIQCNMqno+htoArdRPejnx5UFo4k6Bv3cOqwmtiWBAI5TRwIhAL8eEA9074NTcQBUsXArRrMSTbvbJcx1rOeIKSidl3iq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4337142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa115WCRA9TVsSAnZWagAAV84P/3e3TWq0UcBMea3q9OFU\nXOVGkSOk2U2bq5FD4NxQu3VCZ8Nk04keMc0gvAG5a0IJ2PA/A9VW7qoupLSH\nSJ1G/JOqXIVWCH/pewQr6Gn+Dus5Xtf58PzB2YZFf9wUOEb9Y1E4xaV88Jbt\ncV3ywoRhP0ehpP/L+Xy6n5VkZ97dLaYj6Z0EZR0uZhX94PNfiqDe7fHDjdWC\ngbAAoTGK5Om5nQgP8tO0UWUV/rSH05NdzcrBn9RW2ggDD813r9KojNew4POK\nkmb3ARmvkaZr3STV4VHcO8hBN+yvEeofwUqgfIBjvu11OalOis/X0u2/Krp1\nEZV8SvXDHUI3pSyoHbIAMFRN0Qf6Zz2dhqgy9f58bsCco8Bm26XSLPjtyUty\njW7kF+BBmTs49DSoe52OpadYY4F66b0J85xjFAIx6yeZwuA8TPWBYaCQGzcn\nFHoyWp8MkWjiK62yAsqMzD9aj2Z2sPJWHOWs/tHOviNVbrXpfWlYbgmtfXHo\n5oEqXqfUsRSe5JFeSUuY5H+nAu/YpPRYrUFjMyi2fXYtXiSZi4s32YynSgTM\nCjUqbM2J3i71E1mFaEoBkbn9yhd+sEKlGsuuOvErOwIfwrMS+bgV565EjKKj\nDFUMv7+6zTNBfcLxddhNZzgi6bwSw5jdCNzxKwbOf0fnI0edITabImiTyiVb\n3rmd\r\n=9Cf1\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"]},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"6992bc85445b2aa9d2aad586e268cce1c1727e42","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_5.0.0-beta2_1524063828495_0.3519124992949263","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"5.0.0-beta3":{"name":"rendition","version":"5.0.0-beta3","license":"MIT","_id":"rendition@5.0.0-beta3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"217668d873fb7762784921e6aeaea978ec24aa82","tarball":"https://registry.npmjs.org/rendition/-/rendition-5.0.0-beta3.tgz","fileCount":117,"integrity":"sha512-yaZaqeDA4bgA5AbkbnEI2MFXKsjqwqkmO4VrZvK9PtTekaSWo3zQ+R41QIdaRMM1Ib02JmUKqsAA1gHKFXxaTQ==","signatures":[{"sig":"MEUCIQCcGej6Bv2obB7fn3L+NBSMHKIUCdpsWs5mBOx1n5HhRgIgBmIas4ziW8SS39lvmf7DrzlrR0FuLvFe79xgCiHgnzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4340775,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa12dZCRA9TVsSAnZWagAASdcP/0778AeKdub7ip+81IDW\nrMbPWC4yis3Vv4B+mU4CRQgIg5DUHfsai532xAI5CjnsmUkhFjCKN4uAZhu4\nmtJIe3LFoB5lcall1lDEZCc7tBFyuGgppwh63XOsljhym4WHhGmmY/gDrMui\n1xl8BhOgLFcIp8xwK4gP9jZ8UOVXQNak8xUum01dFe/RxfMsFI4OlshZm5k/\n85T/2UByPRNdsWFzucsrDaN+sTGresdMh7Y0pc893jzk3UDRFpyCI3wgd3Ih\nsV1ZyNqgIS9OK/czpmX2nM5W6TjUfxn/tSFkTzkITYuTSzP4+FxWyNm1EZ6y\nf+v9PCEvnDZ3VJClaF+VnC2d1a/WoxHszuRFRwXCXvVBKSzmxs+6UNlVoPPo\nBx82ubO3GYnVo6AoBEUoTQB0sVEICO+aGN+/ndvESXv18TDbCYQ4XGcd7vBx\nAgEP1OS3z2PMO7Ru6U8UEj0e/3ZHmmns/ohm0hgCBbtjXeOGszTSfBTkdR3z\nzl6m4IwJ11jiaMTYwLr6paHAG8k8i+nA26Z9W6bakOBcFvR3jPP/KENCPvDL\nj2ve1xatLJ4AVo9a0IiGcRAKD9rliA1B3j68OvFvvnL4y/UBgQ/B4C+AKde7\n6+6wO7LFpk8tO/DswSfZG9Q0XhRVYpuErt4ZWQPU+JwlMTCdqKjv24qrFE/+\nXwa3\r\n=wU2c\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"]},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"6992bc85445b2aa9d2aad586e268cce1c1727e42","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_5.0.0-beta3_1524066136421_0.1485220552964992","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.4.3":{"name":"rendition","version":"4.4.3","license":"MIT","_id":"rendition@4.4.3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"710697ee0e7474991a93cb9a414ee8296e48aa8c","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.4.3.tgz","fileCount":117,"integrity":"sha512-go/Lpn/qD8ObJ1BGvIcjr01f6vsX4F+YYCrd0FHfI2QgcNAt7U1OCr9Nm5BTbW96zXtAAC2cEFLLKbq95LDNwA==","signatures":[{"sig":"MEQCIFKXNBg6oMPgHDPLHwZsDEI0Rh0f50nzH52zTRtzHCjTAiAW16QWxc5OnQcNaOYoO86axmMBKoEWjHc12wvbTqWvBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5490748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2aZpCRA9TVsSAnZWagAAN6sQAJswFvNh+r7bqjpU776h\n5tXRTXHrhZTKJHFItBQ1SQJL1BQA2ZGVPssgaBGVTuq9rwaJddnsV3BLXMir\nPVImO9COSzD7CCmdrOeUIUheiFBTBexNbChPsWpSUYgkoJtuAlF5Qxc9543y\niECYPGP9T36xTKpU7G4SxGOVCIxkQsS0F9UiRs/NZ5qFmeAnMkvSfmYMPQ2O\nryOwljxQcgGc5mHIOPUmIfK4f+KHaDtBqFU1w16jeJVo8H6cVWc1i0Jf68Cb\n8ThJYvmxz/Dn6jbMr7VsLxSOc3QnyxTNwRCHRVi2DoWW0rt8VVmHX0s49ELo\nxQ1PmpfiK/8HdSY20mBRZGRoe4sQny2rjphm+nx/wR6nA4ietzfzt8DVCCAa\nxFjE5RyEcgcpk1Nq0Rws2X4QFmQUgNieJaABU9l3Dxy7nF+HE1imX43Q/VMI\nlfc8SAv+kKcVxNxNCS5/HwmKwlKnPFiRiBmNIreFhyUzY0+cgxNzTeEljRNz\nYcA+9wYB1Ar3GD+QzwIU6FYnOAruIwxexv+JP8LkBO3csfyyFqWSqYRnHdoa\nZB6W7K02Cp9P8mi38XysJiSlg3ed1atT7F707jdY6y1usFMsYXin8SOFp+sr\n7F5bXSriaiq0ECIytceMc9AxH2l/zMG9oG5C+tpUcRCmcuC1Gms6Gee466d6\n1F7r\r\n=+QGG\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"710697ee0e7474991a93cb9a414ee8296e48aa8c","gitHead":"47b493878cd32445e27aab4461d929970a141931","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.4.3_1524213352755_0.9078944128807152","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"5.0.0-beta4":{"name":"rendition","version":"5.0.0-beta4","license":"MIT","_id":"rendition@5.0.0-beta4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d3a1f5a601d860d4185f18c73a113976a5b8e7fc","tarball":"https://registry.npmjs.org/rendition/-/rendition-5.0.0-beta4.tgz","fileCount":121,"integrity":"sha512-v+FaA9D2905NT/Xo22RlGZzG+CTg98XPQH8sKmEqFazAx52PulmwVWOLfoP123vjvC2UGalXCHkGb5+PFGU5kA==","signatures":[{"sig":"MEUCIHE4JC4dVWkLeaCF3GcBoK94lM7dBEn5KjWYcWVRe860AiEA63JtqyIJgHayjibBqqvYwKh5t5yl7Hx1RCTrzvF8H9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4367200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2bP/CRA9TVsSAnZWagAAZsYP/3X5QERFLSkmkyKA2LtZ\nZBYOQx+nFXdIHkIAsM4RUXiOg2lTFRooyNg1EnmdL1ebCNyTxOOM9I+zQDO/\n+GL6zDwXZ1UMcoITeI7tAklRTEhL8nHic46dtc2RPrmUwXApdSIA0K69bBFW\n+uv9btv13v0UzkI9N9tDcLC8ALxomsshyShRQRIboc4BxWfc4z/uHVAvfDYk\n0nAPzhQ+eFt+pRcWp+kTJWTolAueaGEUMsM6Af53X7Fw5jBF49eTfR9OQN4Q\neTs/iWijsWmVBLlQL1kYZmWOPLvtSrvt9elU75j+ITRKwLLhsyrvqJg3/8kS\nUUNdBYJ7e1HtbXP6HJw6cIrgKQ4BckswpH2ggi2uS6p8rR4Ucp/7Ol0mmAPV\nlWem2zKSTKn7J1xm8/Owqr+3R4MTxB4U6jLnWX/xylYaCjsinSqGwIQAJHo4\nqzXAl7RMyZiWLfmmu9ZV9ccxfCagRP1PbiyCX/qcK+INUnab7K4TNyJepLOI\nz89r4Axf8NJTsCzGOF0wfYTfsdUrEhhR6xEs0wXXeU5s+kEAfbGNzdEXK9VJ\nJawjRSIMO8nFPSTuF9QUsRgs5zWlTkOSs3CH1BOfNkQIFR/de+kKHpuxaXBi\nAIZpCJPfmCn1pwu8B67HdDU5/H0CjshrL9fJ5Ul4gF1pYLNWh5JHX5OmOBn9\nulEo\r\n=Ak4i\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"]},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use `fontSize`, `color`, `px` etc.\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm install\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"c9a44ef1337d504a000aea934bb94afad738b35c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_5.0.0-beta4_1524216830640_0.9054077981170694","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.4.4":{"name":"rendition","version":"4.4.4","license":"MIT","_id":"rendition@4.4.4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"322e6a74d091c02a5b68f76e2b0b660efd19c77e","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.4.4.tgz","fileCount":117,"integrity":"sha512-XjR58Q1k4rdCHXqknjSC1ndEfIK68K3b4frRh2Deds5OraKzVMjxn4L6ispsvvex4cIc6uk9TCZyrOa0imgcpQ==","signatures":[{"sig":"MEQCIG2qfeZ6e1OJoqRwHLcVWtw5v3pFTfHgJuaMikbZ5VKzAiB5C/zQ3JTQHjwdcWhbcu+Yk4hSxXTJhskWyHpa0URmow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5491002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2fKgCRA9TVsSAnZWagAAFkUQAIOtM/lnQoc6g32paNl/\njkcj/30nkZOEQkIq9jjjIA6VY7DfRczVj6VDr9IpIhuQDylVlFkeHEAWhBtp\nxAuG/BiAvnAqx8062BoImlq2aIekYllqloeCLHKnOk9mCSyoFh55WaDyo7tk\ntS+OfaG+XqnFFsU+gbJotSIrk1wYm9ybm0o4djML9A+BehkE9UUs55vAZ4pP\nCg9EtwtRtQkzXHp6HPmCEdFjUioY3iQ/KS2rZYYRX+WCo7oRrKy5l2xjv+b7\nf2ah2cXS2516rbUi/xcbSa7I6FCFZ7nyCB8TPwmA//ezIG3xCfAdYR4w3f2/\nuJY5L7yfFkqo/EBYijhbYd7wS4JBGcE//m/PboJz/RGzBDEX97rbBtCNDNdt\ntoIBp7k8y/ZgP0DlQSXEpuyxNpeqxqxy82sZvDCISsaLfBOEtIc+whNzkfBz\nIeJ+dOHVpJdEk8SlPxTqvR3EJ1GWBBd9c5nbTJtFwjEQqob/ztu4CKHSZgmb\nGvD1Bbw/D3HS33+hbDwhcM7Svqvnh/6EjBimQCkvAZ+2Sb45fX4yDCPbVNN9\nr8LQ32O2lbYlHPhAz+ke8VoHCjPwkEWud7GdikkNQQcqlMA/tMiHiznUzh8b\nmUpQGN9UvxhKEAkF1u2JDGacFg8N0/pDB8dnaagf2V/r1emTOY1OYd/FVoLL\n/bK2\r\n=ybZ+\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"322e6a74d091c02a5b68f76e2b0b660efd19c77e","gitHead":"d2c85ae5791749e0b91d82d15acebb1328642f5f","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.4.4_1524232862503_0.643822335240068","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.5.0":{"name":"rendition","version":"4.5.0","license":"MIT","_id":"rendition@4.5.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"742ecadfc5b42aa9f699f25cf424e71ffe4f1381","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.5.0.tgz","fileCount":123,"integrity":"sha512-Bm/afc57zcVGRNF/O1wEULWyRJohfVXogEgpd5qkTLPtWcLRnso32ysTjin5DU4PvZ0+pHnqNJhkSGgvehy/tA==","signatures":[{"sig":"MEUCIQDg+EPVcA/9+aoWcfQAxf2wmqg2hwgCemb7/tkeGIYkVwIgIacTbGMLQIvU4wN0QI0E0X9JLBbBF+NMBWM2PfojTos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6371110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3zn1CRA9TVsSAnZWagAArJoP/3eFm9Eyq4voejb2hNWX\n1u7iBe7eoe0rWcgjG9zJfbUzk2BPlbZoV/bf5tcshabQQjFWJzJiyobYoczE\nl2fyInzL8C/eKVhCz/XpyMZ9rVITQfsi3BUt57BeCVGksGwNG0NBjcykNtau\n9HWxTd0H9r1dljEIkZUm1xO7W6wHkBka+vGnBNl4OX8W+HaQ6MbkN8ZM4kMF\nNUvDesyL6CXDIgHFEkvtDzf3YgJeC2KOaSZR+1EV9wgXLGWDCrjgwXRva/I9\nLCzdLkeeXhtS5qhnCWQcDRCNq4o/yGjpG6r/ubu6LjGkjx6w8wFae1OUaEdM\nC5Amu/AWWHPTR320MZaiDTovSoMjWHONcCf6bjcEusi6UgoVPFOl1RWj+VJQ\nOFyAPi/or1On/1pifU46Qa30pLANnETYjmnbmmz/QG3e+KVzY8FmIswy6SDX\nHW0DkliMIRccU+a0OpzsLGBjiO8QOUtx9372zkw5ZNS2L7uQfW13ivnDlVZd\nnzR69r4Zj9+ZNy1kfsCGXP1xSnf5wd33sqFb7gUzVdPl+7gad0/SYjuyWccv\ntEKGLiBUCeWil35j6Ez15O97/O9QWS8uOahJAbWV/2+MDWzB6zYI8S4zXxQY\nbE65Lx7sDM+RZ8AlqHtDndiM5c3ukAjnYgujLKcs2qUXGziTBbFVTTC4uc+s\njkb6\r\n=/31V\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"742ecadfc5b42aa9f699f25cf424e71ffe4f1381","gitHead":"9c3c7114006c589a0ba5ca3ec5e6109f0e3e4a2c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.5.0_1524578804242_0.6776618112359643","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.5.1":{"name":"rendition","version":"4.5.1","license":"MIT","_id":"rendition@4.5.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"36f1d1e9b78f15359553f6d6b444abd52895fb20","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.5.1.tgz","fileCount":121,"integrity":"sha512-/scyW/S/HTCavhLOXVVoBudvP6sF1+bdpXX0PUGo/qs8tcN9zBstbOvw3R9OzV/0jvA8gYY1x9EVOZWX5uafqA==","signatures":[{"sig":"MEUCIGD6q0W58nS+8Z99CHQDrZ6+D6qPFd7c7OxzRG0De2JCAiEAh6IC4W+Wj34+qC28Xhr3fenCVLpbetmvZjmZLYVjlIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5749730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6E6eCRA9TVsSAnZWagAA+k8QAJOxVlVe5krppOrJMm1z\nhDwbL8jNqZuSJgR8/uOYCUrXdNYEb5Ztm1A3eZkZTo2avSX0lHVfNwyTJjdf\nd6n1wEA2F5aqEKPl+DCg49oPN+lXzcsYxPaGioTwVK6y/ahbihaxVePbs3ZT\nUeyeMxYVYYT/wZRpf/fYHCHhBBq8wLkJWafJFlMwLp+iJliGI6BkFJts26KN\naab5xjNIWIVbgGTIU9QvQlWBG9oQOPchCYPwKqignraRsujfWv44CaNcano8\nysiEVuld3D9iTiLH1z6EpesoLUIIui3IOpRHx6ckyWndjXnnSCvxS9WjV3fX\nykaxYQBqK2YYGPXofPYJRlVFiuPH4ka8Symz92qxDGRYxOAbz9q0me1qjxlp\n7H2fpiskvDmMaLWi1ZyWqqfbuR6NhuLbh0z7kK65kHKlo+NRntS1eDSeUfyB\ntB3NdFeqH6fsTJHxNdsAEmaqhpkmOQSYMSvyrHLQe+6tjRsbroRlRIDsD6/U\nijhNFrTKjm4GS8RuK6L0BDMA9mhzYQgTJFxlDPDJKYg9gRF8g6Cbuk99YbiG\nH0GgQldYsOpo7bHeRxbYr09GyDjk6QXpMUZdMkJJJ5yKOmRLOZPbtnTFCvEb\nIuUih0/E1AyYFMcQdNxNLEMwZDEM/0z/ShYtdgUdjpTiRE+rjRnRe5A87SaS\nqGlU\r\n=uB1H\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"aa49c97636352fef2acbc0884a9a2950544f26ce","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.8.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.5","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.5.1_1525173917171_0.17423493535202295","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.6.0":{"name":"rendition","version":"4.6.0","license":"MIT","_id":"rendition@4.6.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8b857b8afe2b459582825b0d8a0b670777874d9d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.6.0.tgz","fileCount":122,"integrity":"sha512-wMiLelXWLZh8+zYpBbtNGK7UP3URW3j7Pd9L0JWBEQnVT63kPzLeOHizweWHkjxQJ1Szm8w+JWclPrkF35PrXQ==","signatures":[{"sig":"MEUCIFtJ7P7lO1ip6hOdU9E5wEoXLpdw3DxvmFvQa65MG+u2AiEA/EishBcusX2YTmQhCQmvXozcBp+HlJyuh6fwYrawlLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5971291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6cVlCRA9TVsSAnZWagAAJqYQAJSLz6tdBPsVLu5vDWCb\nAbsOy7C1+pzDWcz3wnW5dvj1vvXl1K5APC9jrLdl2h1YsoyIRUSIyJkDX+ic\nPFuTNCEoGeU0CI0sR0FdacP44GHjbxFlkqSX4MA7MvbamCQfMVPTANIgX46m\nP1MqmWEFQK1LXSDi9I1GLq4PrIIMOmitq7SrpMaolXXyXhoLr3oWRzf8LQRf\nR0FoQCW18nJC2zOD+0DwQkBDuRLPq+vJYmMkVOagCCoBrEWF+wQRhG2M2CmZ\n3qu/5NxjMojam5ehr2N2TAhCRwy0Iy/MWoEqFxkiqRy3L/PK4PLpXpQByvul\nk/FHiPpftDdqoGbYopiJWc/R0tG8+54I6wuh+owaPuiBZU1GxZooEA5MggIU\nJN51v9jcib/jSGI5bngk7AVYcXGg/FvmM4x6Ups6ZJaA2h7jz9u8W6yHL6yn\nP7FAMpkpmhbWpKCodnYJ5R6U7BISscXM+QCIKbr6fZ3nmDuQU9WAzRhD7tP3\nM+gZSpSrER7Wmf9877qmb/3SHJWWWLe3GQofTkKH3NREwBW7QFVhUeVYOYg7\no284iampX3imyFHC6/Zh4G29r96mVgl3emUlFNzRDr8E+zIbUFXc0qvbms60\nQdsKdhReIa4tUHvAEIHD678n4dNBpz8HcxranyY6abgivyIwK8FRmIyzTnrR\nXdXW\r\n=/gdt\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"a4681eedf5d582027173a645e87caef75863c74c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.8.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.6.0_1525269859578_0.35134141831337096","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"3.27.0":{"name":"rendition","version":"3.27.0","license":"MIT","_id":"rendition@3.27.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2e1e2c5aa6b7f091aa4a38907909d297828dee21","tarball":"https://registry.npmjs.org/rendition/-/rendition-3.27.0.tgz","fileCount":113,"integrity":"sha512-4gDoFLObTcfmReAhc6amIgYV8iHNXg0y7kGbB5+vwLyiAonzTf1aYtg6DiVAPFUjquKmFoVhjD3ffvv1weYy+w==","signatures":[{"sig":"MEUCID+yK0J6eOCsP3RzIq13R+Ac+XKmTPa/mJu4oSFoLYWYAiEA7K8ED0GKhPGMzsdrKAgc3EUJl0QxtJB2bd1RQXALJ+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5240724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+Z0ECRA9TVsSAnZWagAA1DoP/0XH5Qh1VYP2Z4itVwfF\nsZnK5If/bcT/whoKfUU8Km0cNeCdqmlJQMKLkHmbiZW+Sh1ztPc040xYyLZd\nAmMeSj3h4qd2aiWi8g04GFe2RTmd9ed+JNtb59tqdGU7YrcP3IS/r8G8g1ut\nP0kSiL7t+ek27WeczFpLzkP4nG9F3Ut2bpte4KVC21Oeyal1pNDcYlqv5aWh\nu/Y7JZJnO7xFn4KfAEy5nQXqtphFNmor5a5EicTZgrM/ByDBFgpukmazit6F\niqwemxWMMSNuGOUUiWYTFx4yFms6hki1SD4tDRAgK3jQ68jpNnCzgEyuKSsf\n7BbHdI7NyZ10DFSlWcZ6Q1XB14a0jqDgnJ1mY2+zsl9S1vgFKsnVoI968wt/\nQjBU48YNM8zr3L3Q/BCVMQShM2jBcCKHEdAHtrEXot+R2EJ9nDL2rond7nAJ\najvmZB8zlXbbR+KI7kw0k6ymB6AdQGiemfZCboZmSrsWD7qyifKPKPev7XaN\nGQGxsS53iezNyrSRPZWwBBUOgK5Am8/VPqqhLvV/z5pS1UZmj2NK7KMD24ko\nd/VEgnGzh8o7AqHsr2cZm44i05MhcxUC/5zP9PbEw3LTwz7aFAJMYUPwcE40\nx1sdZXCVSIlv/EljlbewBLFH9t6d8lS2T1CnDlhXuLlDxtJQhoUtSSXsfcjK\nPrxo\r\n=7a6e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","_from":".","types":"./typings/rendition.d.ts","_shasum":"2e1e2c5aa6b7f091aa4a38907909d297828dee21","gitHead":"6191cf84a078733cb4fe5d468cef4e2e09d65491","scripts":{"lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run mocha","build":"rimraf dist && tsc","mocha":"mocha --require ts-node/register test/*.spec.js","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src test","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src test --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"3.10.10","description":"Resin Components Component","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","paths-js":"^0.4.7","showdown":"^1.7.3","recompose":"0.25.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"2.0.0-10","react-icons":"^2.2.5","styled-grid":"1.0.0-beta.1","@types/color":"^2.0.0","@types/react":"^15.0.0","regex-parser":"^2.2.7","resin-semver":"^0.10.0","@types/lodash":"4.14.106","styled-system":"^1.0.5","@types/react-dom":"^15.0.0","@types/recompose":"^0.24.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","@types/react-icons":"^2.2.4","react-aria-tooltip":"^1.2.1","resin-device-status":"^1.1.1"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","husky":"^0.14.3","mocha":"^3.5.0","react":"^15.6.2","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.8.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.9.2","react-dom":"^15.6.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/node":"^9.6.12","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"3.2.8","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"3.2.9","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@kadira/react-storybook-addon-info":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_3.27.0_1526308099826_0.33290978206102384","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.6.1":{"name":"rendition","version":"4.6.1","license":"MIT","_id":"rendition@4.6.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"73e87647208e12ec20e620e9faaf19ee72f06138","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.6.1.tgz","fileCount":122,"integrity":"sha512-9yeTDXZdgPqChw790IriaJ7+7UbWBEHy4xLXjKEHkrLe7Vy7XnHKdB6TQ8UTAZC9YbIHqzcURd4mjnKUNUtt1g==","signatures":[{"sig":"MEUCIGTjSrpMTMVWFb/dUciyRfLnIvwR8/9zGguBHlqDc9P5AiEAuCRakoLK8mb/0nnRp5H0T5tZtPOMekC0KsGBK0ckSY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5974033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBB3JCRA9TVsSAnZWagAAGzUP/277A8r67d08DAAle3w/\nWyzdC8y18QSqsAyhd/FAvNLxW4rvaQT8vcSAeCQcGZVigs+zu3NSmIh+M/Nx\nNn/LGm+k0gndvce3mYPcyhcv/tKLZ40F5Sq65hmyKQo8+q/PIPwhZOqwxNy/\nWrLJcZ6zXu0BM6sWlntv1gF5jK40BfhBJ/oFNiRScmF4KZ43A02gRGFjrepj\nSzjPRRWuU8Mwbo3/wgec+JhsB6pukfu0Vuln156noH7G3kHRiFaEsRPWSo06\nOQOf1CTWS9HPRTJPSKFkIDlDzLe8EatcvYb3PYBVVRMDEuMC1uYjx4lRvU7d\nkAU2/O7SrJfgxel+mPPtOG5CuAcCHzWKY0nFER6BWPkjxnIQPPQAhIdLMUF9\nt6IW3B856fyL28aqezum6w2ckK/UpCF2TGzQHL+d7vc6gCMD2N4KWy/xZBmZ\nLiRB/pLmz/agrx/OB2Shzkc5O7d8vTUyWWfZxgGcokNMpcFQiFwljKKLMycW\nkoXwgdZKechFjNDpLTiVMTyip4CZLxZ7SNzbkgMN2NS7F5JQcueuQdCtAZoG\nMdBBS/8mu5lV0UTK2FH6nw7BHrRvfoO6aekmDHnEvJwHI73uDqfJzswxySTc\nSpJbDs+wyzYeMyAMYdzeTR81zKKD2SDFSI7miyJZjabOLIxGEV/LQiLkSKfY\nY+B3\r\n=qbLf\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"ecc97d6ca9594e4293389c90908b84d4c7cca76f","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.6.1_1526996424388_0.1415688056086859","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.7.0":{"name":"rendition","version":"4.7.0","license":"MIT","_id":"rendition@4.7.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ac23f41f16b4ee01cdd164b7ec55cadf042cf139","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.7.0.tgz","fileCount":122,"integrity":"sha512-1bY5uuv5JUs+zzEOSXUcWgATOAQnvDwyNLkQDMeH3o9LfzbUiz3K9cB5l5uCqfUB9G4J593+hXEEn2nobM30ww==","signatures":[{"sig":"MEQCIGX82/g1FoijeIS9sl4kswp4S/k4uyNlUFZchfvbqTCOAiAIq7HJZmDiPn8hhnyBwbiguP7AXnJWC1hAgbQniPmCOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5977685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBC7wCRA9TVsSAnZWagAAD5wP/AiEITv8ILlApUG00u9b\nkAMWYcBSAzCzotn9JWmn3CdbF1yjR0CoYEJ7ZdfNjam4Tx93D3CU2jNO13sN\nxMB67Z3/6WIeIE8II+uJB7iH0+Vx3CQQ9l5J5EEsZpP3GbSRJm9ghncV0ohe\ngOo61r2NMXnDpNe8emaRfnr1vEJmGL4ChRNXOJcQRo3qLacklKCzQDupy8xB\n6hqvWQBce+Ay0CiJuAKEKFxTTrKNtWk8YGwMoZgn6VcK/GEpnrrDm3hE+QhS\nv/3tRy6vbO4s/8f5pmAPAhap4LNzVuUSts0qVaAk3sy5LGOJXwbjWg1TVQSY\nqpmz0n+3a8y/i+n8Qc5VQ/OPvg9LTRlMsjlm/yv9Qkt8Ts9yk1WFNGHha8RT\nabh4vDXHJEfMV3V79PfFpRwnjglZP4BV5rTq0Qo4Wy4DWPesqUpDAq9HDh9I\nBxE5/eBZXF+HTCwVKYYeaK2TfJFIdLYrZZOEd8afQk7AFB0/mu+VvWHti0nc\ne8Q2zyq7str0RXaR/nVyQqZ29RXKZmUmcYhAu85INSJh5POWNZg9WBXILZgr\nu2QJo/dLbBMb5nmuejcXJG/BDnr88jbUHmUMfgnTMEIxHI43FgyR51mxVY4W\nELYxsXjaK4roBd0V6b9aND+dWOFlHcjKK9H+Co+J8FJC4zzV2efvcLJhOgAh\niLr/\r\n=QvMA\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"6e7c25825c921473c9ec4cba75fde80c4443ba93","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.7.0_1527000814996_0.20652954807105628","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.7.1":{"name":"rendition","version":"4.7.1","license":"MIT","_id":"rendition@4.7.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"63d9330ece266bfe1951280030b34f8241eb7858","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.7.1.tgz","fileCount":122,"integrity":"sha512-UBFhkX44pls1KGvkFGMixojBUOll96duT+EE+VN3+HChyv2ShDGRlHCsyh0dAmaK72WEUjgNEh/E2zlek/q4ng==","signatures":[{"sig":"MEUCIBWcRD7YkKA48kWAOgWTC3vK7Qw6MIQ0pRioXmucVN6xAiEA3pnotVJYSUCSp9X3pfEU57K9sTDFXlL3PwG2EwptgfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5993737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBDyACRA9TVsSAnZWagAAjP4P/j7cYc8UmthmfCFEvbM4\n1TOvMjQGkndVYOzL2+CwAFNk4GlaMFo/ekCIscZKc8E/oWgP0Me7J1Gor9ny\nztNnu1/DixLCEMW0hsZKjDlfyevqW1+ValnH2xwfXmL+gouAIAy5K9fd42cg\n6oaNOoYk2GaQ1Eeu7J02swZkbpN5IiCZRhGKtr7gR3FuxUh+s1+BS4SjDfAK\n7KoIKy7zYQYmrjPvpDMhP/XaCFaYql6te0eD0vyrL+kUlfyRePIyQQIQY+f4\nOG2aApG4OcmHzw2tjZPNISC8o1DVAtv2/czMFV3TdUTxXgJUHDQrfHvvCNjD\n6x0qKn69Ua0Dz+QdPTfW0mFNLY6v4b/x7CgUy9uXoIk0CqxhUxQ9KjwNrc43\nylY1Mt9rTWizFZReE1YhN0fyCy+IshZ/F+9wxSx2WidXG5xLmjlYnxCYtpsz\nZc3A9Dow2p0Bp0qkfhngrmZA+cTukpdsfSoYpk9SC+9kUW/LH9xbORv3OqgN\narNyHej6SrFOncBBKfqfFA+eOPzJRltMYjJj+6nQ70wo/+G+FY4n6V9JnSUv\naKCmZv3ncxTNeg0/gkm6Vp/MHWQcIah2pj6M0Rh+adgg3J78A/1jfy26P3vi\n/BtfMmzByAgWOlb1ak2szLIDblL7y15iSCu6x8w2dMWojWLnjFx0Fb1+acTk\nULXI\r\n=P7Wk\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"8a76a7d3eb62479c1210010dc472dcf566f42aaf","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.7.1_1527004287428_0.01799677099821273","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.8.0":{"name":"rendition","version":"4.8.0","license":"MIT","_id":"rendition@4.8.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c4db13348c89d934920a9da917f8dcfa9cad6e51","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.8.0.tgz","fileCount":122,"integrity":"sha512-4KLwMhkzBfNMUHS/zp96ESc179xQtmRD2dqZnG66RNKQy8dzkbMDmixD9k7Xu6ZyDEKVI3gY+G5ChizwB9Pozw==","signatures":[{"sig":"MEYCIQCQKPno4OmFNKz0bfurA847jxFDwoT6DrQKtC6evx9BRwIhALnsdckB0iBMicmjhjjKZo8cCRLyKlgdpkgu1rYzFid4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5996947,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBtaiCRA9TVsSAnZWagAAEBcP+wR9eBISFaPAtcJ08AbL\nfAtfQl+fFdymp8VxVJGfh+yR8RVeCaFz1GHIY8979pL/zR2rV/GzjEoHBZ3G\nhO+c7tY7HkgAjfTxs4ZEpDpQe3u5am0NKwEAWRP3HwZvkqUiXV6VZjoUhF4v\nsqfzVcxD9fwq908CvvYpK3ju57o0UyJusd6DI/oSJrh9xfY6roaDCmCigFyf\nBs8qizrxln+ay6mmYDCrcOS7yRT7Z33krox2ZC6QQY9mARVsAZqjYJgN61oV\nkDKzFsRhlFzgNpUuMKi1fWKlfzdhxpMcwyRANiCTe7MmV4fD2v81vcybtcR7\nstyo7xDnUDCAvrFx5bxV5FyPhpdbl86MDUmrlwIKgthUgpC+yseMsPH6H+u+\n7ycU71BrCO3A+Aqe0AWy9wxzPFmp+fHedBYCyPZD+iShRQRchmV49FqfBkI8\nr+oHF5r0HsBzklDytmeob9Y6ivNulysU2juHOqo43g5IIZ4lLOiGad+qnnIU\nMJk7pMWAEtcmI2lsahfcymQQIrC27mxiEBlB+TrfItu26LWgsEEHE0E9Poea\npZM7oHMrzQUKMbpxYNQ0d5XbXW6zxd6vQjAlDVpcZJuDg2Ja+hfwx4/MRgHl\nObRC25n4YOA97lFVA7W8FoIpv7zJO1+K0NZr0LgL+MtL1FxESb+DbXlJ5yxS\nwuHI\r\n=h/Nd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"ffc901a8390da7ed3b2d122fa29c2e4285062cea","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.8.0_1527174817615_0.3055024434475684","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.8.1":{"name":"rendition","version":"4.8.1","license":"MIT","_id":"rendition@4.8.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"3eb74bcdb8bf2e233c18bc3c6c9343cf11c87ff4","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.8.1.tgz","fileCount":122,"integrity":"sha512-6omuMgPzeB/pvV2kkPvHU+cm9CaGP9uXorntcQ7T+5UVbRWUYlvvmHVtnsaLvELOLXhEMP7kgBLcCzmXgcrnog==","signatures":[{"sig":"MEUCIQCWavY3pTpQWM4Q29ZcNfQp16swkwyO7WXt52KcNOL6LQIgA+IoAq3WG1bF70vBfWfSCtT04lu0OZsBohLQYCiY72M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5997031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbB+psCRA9TVsSAnZWagAAalAP/1vJVGZmFajfbDjGly9E\nHVrZNdKy40BoKTH0C5lmrDdFCcOYEhCW3PTz/JE6aXHTowojiIB21o0WRUJQ\np21onBwNMipOo7ls6VxluCmEScx6KylreM1Q1l03JzH5gDa3TxMhxDFlA8XO\nqy3+41Pmnw1IVnaQIwC0m8kcqtieQVaPueLefjiEjBeWI9ZoYramcVU5eBFq\ns/94G5azg54gGvo0NBq9kJhekio9Thx5JEM/BLaelXzPVuY5pDGqsdiOwtbl\n+fz1dEC1lTOV2KapTzXnoH7OIqUXakqgeqncgGnnlD5wNKRR0gjitD3vWsCj\nfXM6wWalxTzKIGgmjXyecsYp9Nd5HyGWY+rTFR1FONO9L3Yz8jOjiPpsbIo1\n8WcTsMVDl7zAtLkpbbxxGG5AbmNkfyFNya0FpJ6wkarOkxM3Wtxh/HF+H4ZE\nXtM7atSwmIxSs/NT9mYPELeR0J8DaEAveiEszsZdPpjZvVVqKwOjlc+VtB7C\nJAvfeLYcBjZcOI885ttD0VlYH5DLsYsiXyuS8RMOMXVOBNIFLUXGlZPEpZWt\nNbrE54Lr3iciH0xK7+9CgQezaEMEb4pfge5qmGTDBSQX01UJfwIYptPGhuBl\ndrmTaJIb1YNCo/BqztaF4h9DfLxwGqg8creCwiiwx/5yTSlc4x2tajixg9Ht\n75a5\r\n=JQz3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"f3fe643774b61c55ed23f32084e05efe8f435b3c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.8.1_1527245418704_0.827342288567694","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.8.2":{"name":"rendition","version":"4.8.2","license":"MIT","_id":"rendition@4.8.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"77b596a6bd9e6e5823d06ac34dcd91d0b3d92949","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.8.2.tgz","fileCount":122,"integrity":"sha512-rBkNe+Nt1oosg7B0ptYVe+3SllV465DKpGhuKofwOMUFhYBAudftetbI3ZSSWjcRMOsZZXfRaJei1GdjUDYvbA==","signatures":[{"sig":"MEUCIQCuyaEzMhD4O3B4Ze81bylZCRCcdNEznIbyyH+zRTIoKAIgL7a28ODNWeSRSNt6vQ78TfHXrbch80o9kZazUJqLa5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5997135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbC+QACRA9TVsSAnZWagAAtiAP/RWMojv7DJOcxJ4nNQoV\n7x6REnQx8pm/ws4tZgQXpGuJgB7lvUOwek4AgJlMDIcfltDEgl3qspXNECHp\nGbtk/9AXOpylTn1imXg97LQ9d/B+2/mH/xZpQDW5jJkWTbirG7tjmuQWDpg1\nrmL090raZADl9lGlHOBUEAxg6WsVN1YcmTDWw9OYZSsjdwvU10k4gS94816+\nx7mzVeU7RS0S6buhqqzesDIR/Z+/EkIxgL/7GE0RDzc4CZ2EhreUshKeVMDn\nhdJjvZBP6hJtKVEWKz7rYfHECj9sakqzNGlTQomy34N8mzfUqCOAZnm1wkRS\nLJci85UNy1tq4JAEzO20ZY9ZA3N7E3NeXehDv4HF5RdkKQvivd5v1DUh0c3g\nm53TAHNrNlTeQ/u60ipdKLSQaN5uaEyXoD5pXswVvw2JlP5byNo7016QhRIZ\nKOWjs+/3C60ApAkqJL4+MMF/GeTXmU0SdV6ieuCUC/DyfiSkVfVreIOZ2dII\nIZqohWwGg4Ec1PyNqAbpM5KUiFezBkm0bxc0sPpnhvYtUOOb6JKA/kw0PXct\n8bdUliUia5dEFslfYW5Zka9ViNTlZM6KOyaKKNlV3Qc44nZpQ9wf1Bh/a8fm\nisggvRLkqplOy8cY+hEPgphPdiVdVoJ03/R2Jo1o3UAYLil9gW3Y7eGN/7k6\nepFk\r\n=BnuX\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"16d99b9f9c077ab11312d930d0b79fecf20a9b71","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.8.2_1527505919151_0.4061974799103787","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.8.3":{"name":"rendition","version":"4.8.3","license":"MIT","_id":"rendition@4.8.3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"9decf8f88bc76c69204e43db8968189516fb7681","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.8.3.tgz","fileCount":122,"integrity":"sha512-H2iZbsyG69Bo00qs+rtjAt7nk5Lyd8U7pQmdoH4n6pJrxIGY4JV27ZabD7Dq6375ey7e5ieoPR3XVQ2uzYqj6A==","signatures":[{"sig":"MEUCIQCZjN4Z8tij7StYCGe2sCExjv9jMbtRihHVEVmJ4Qi54gIgRbjr6zMWY0SQZr++wwiPuN5zG2higeiARNDW1JRmiY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5997225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDBdzCRA9TVsSAnZWagAAX5IP/1pAjs0V+/keYTmPh7yd\nh4pQHxFKFgcZIw5n6khoEq3cnBqHaNvsxWcjIdK8HQ5ZQ1LsHC65bMynS71m\nY6vbviZcUtu0xgc8KozpPNJUPV6ad1Mqq8QTUqD2QRF3R9sD+LUQW4bSA/wc\nvwmrSqXMdp7uYAZpmDe0Ice8EgoVfi7q7drA9JsKIpLdx+DrUklNQPB/LC6k\nSZlCBA+T2U8/7Y3kJesG1Q8IhaouyqmEJ60oOypjXRP9PC0oigrq1qKhNtNY\nuwnKiJUbwsc7LjbXoWaQSJ2ZXFNkOSCfjfL3LNrkyPrChnqt8PxJad5PtWWp\nipWBxNMEkg/Yg6R1oJYrTg8FEiEd2iwMrwXoam8sDhEOTfbgqHTmjTkH+v2v\nM2CDbK//gHYOtaoM+u6dqMu4E/0TX4XdelDOX7QBABLOvuD+l03sSt6pBmXA\n8E8dbp9O7NgvH+m6QNSnytZBCDb7Hs6pPYJX9E7NNedos5/5+sv5m7/OYQif\njTPiI9zazMPpORTXMLj2Em/8AVLPQ10kviYljPgzAXvHW4vadNSnN7+lQznL\nTavfqN/7ZOn+Slti+GOahHogm01oFsj3aHe9NeCmDJ0R9WNP43K/LQoS1l7O\nCiXITPFUg8FvOq1T4mIRl2Dcs3P8uleemO2Wf93wppQjplTZgtblvrNSWBkg\ne/oy\r\n=nCPU\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"02f30224666a550a716a42d3d84bb146bededa01","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.8.3_1527519089907_0.21108257115748086","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.8.4":{"name":"rendition","version":"4.8.4","license":"MIT","_id":"rendition@4.8.4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2f9e7233e5724407a70e25ca966da3b2496f3a07","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.8.4.tgz","fileCount":122,"integrity":"sha512-Lc6bytadBu+XycPcbC/vaLj36mQ+9/IJRGgSTsCT7cF38xZebsGqp/2jCd7W2NLQ2cKR9PkOxG0vVZ+5Wbm8fw==","signatures":[{"sig":"MEUCIQDzwcg63Tu3YXR7gfV4R86hHF/ZtBZYcsyriQZ+qKkcQwIgA3aTRs3fP5eR441i8UToxCyzqbXAR7zBBr1HMbaTPBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5999387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbF95cCRA9TVsSAnZWagAApT4QAJmXKuovhk9f2ml78RsI\nBCTsJ/Cy0RWMoIUWz3whscQVw6Pg7/hRhmlm8DzNcoc5hxKulgV2LmbrMvvM\niBQFvW6l0YJNPtIMIZiBOKyJdiKZlTTwejfTjd4GGCZUgequ+j1+pK2yqOD2\n3e0C9/lpymArHXumBHcFraWrbgLo0eZT+/KcgBpqsMOnvHxfW9cCniZ7dkbW\nb6AOIDUySClpuuVTLuZqGK/fGm2q26heHroT9PQVARcViFbu+kO1/UEhUHoi\n9Su/zObnLrDSFNidRU/qPU8MI9DVJFMRCg4v8oiWbRbI8ZRC1/Gp/JDC3M+s\ndxottukdPXLAnqrJEMFk5f0NBvC+1t5LxbVO7op0z6ItRmr4Xzg1J2wISeqQ\n3lg71SAnnF3oXa9GRVlHcjNlcLg8LRDYiBp+4wk5OR9ZEAHqpgo5yCa9ecAv\nRllP+POkXi7pG0k44HhgeRtl5sC9+rFlcRy7ULA1tYiJVnlmGQAXkehYbKwo\npklW/zu69H/nK3p7hYR1dtn66tJF2WLmT5/WATXwG2UOHarpJd14mK1NWl/y\ndWnMnjdwRryCjKwjK1w5iQq4Wamp5Vxt08KxPBPPM7uxZC2clfxGNRsJB2tK\nWui7/tEns993d8aMYBa9LfZGlmxEqPI0v06xOW6hI894sHCMolidIeeM7St+\n/Q2l\r\n=ON/L\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"6f8f8f5dc8855e15bd0cae2cca340461fcf539ea","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.8.4_1528290906677_0.9868610410136642","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.8.5":{"name":"rendition","version":"4.8.5","license":"MIT","_id":"rendition@4.8.5","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"290dc6f8218ec05ba3cc020ce5fbc6c8d3332fa9","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.8.5.tgz","fileCount":122,"integrity":"sha512-uKSPFUZ6DZCp5129aZTzqYQNrv2bocBSibFliA03NAxIWGo0DCxPou3S7TmhPxm7L3EohFrTZycwxgS2Ai7rvw==","signatures":[{"sig":"MEUCIQD+XKlnG9ktknAcWYZl1QKqt/R4zeWBMy76LcBSfwkqogIgRmO3/e+Nm58DV8n/xGYvzPZr6uUA5d6Di9yWzem/G6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5999581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGnjTCRA9TVsSAnZWagAAUo0P+weVjUotghceKv/agoSl\n6vp8CQ85hXmVxJpPulGi9OzxvM00Sc6Sn/Hwp9+TMDsgm6QMBDWcNI161O4Y\n5QKthSBPfCY1V3/17XVnFyol/3qVv3TcG/Q7HvzeDrf5IcU7LvjQLOWy9ujp\n27cAFrF28wtP9CUvg09uvNI4HMz+4dDIXlgun1PdheHZqxa7ZliekjimV6Zn\nbCjBRlJmB5KMBWvZO+7HuBKCa3FiQb4lBZL+3+liiGHjai8HQkZ9JthvQKfK\ncDZwqKR2/s4j8M6waU2JGucqXM6A/Np1GVm92Ouz1Dc+Xy72SHH5wFFgF8ej\neY/EtDg+tnJDJ7/6W091JgojYdEdvleQsISYkW614SP3Zm75sdI2Vx8UxmSU\nwxboQoHFmhS+EjLzhhQ+x4GDqHCQFnBJdViu0+Kct+bEYvLk27URDzyukwac\noVvWbKAET0xMVURPNqD3+03Y4eJC6pjmKFnSQHHI+XWTRIjjkzwVP0YxpkUm\ntlLKjCNQ/aczArPFKkS1WDW2aX4VPeB+uoWUgj+kVlTUjY25GtqLkiJ3S7Sh\nAPVzDAdYWusYE9k8vBPSAgEts2rUlBQktwNWKBATF3BjmghMAZUMpKG+7b+G\n5zOOzEobNA3EidvjIYmJSkti0fVJ2/fIqHy3C88BrOBR5/p8JDX3X3me+PJ9\neJeI\r\n=bmiJ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"9eced2e5d9907c252b08e4e094fa8727f6fa3001","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.8.5_1528461522881_0.673898595165715","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.9.0":{"name":"rendition","version":"4.9.0","license":"MIT","_id":"rendition@4.9.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1959f373f02626e80c7ec221d0214d9e21779826","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.9.0.tgz","fileCount":123,"integrity":"sha512-kgS8/I692QsQRup0PVPmfs8PrAegq0dCeQ7R6I/ohf8x/UYcZVg1AP14jrrtRllg87DKCPTITNix+Gb6E938zg==","signatures":[{"sig":"MEUCIQCUjAkg3eYFUJzKGfDf8rRMflcrK1jiuPqNCHDewyNfwgIgDHzoieyZ5ZDt7UQJ/DU8Ulgi3GAsNSIz/HUZAZVtq3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6021012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGp4vCRA9TVsSAnZWagAAlR0QAKCMfOBtmwanzYuuZ5eO\n4/XPFQsx+L0hA+gIIfhFMKV9EY2OJPV8WWwnL2AUjVGq84We6xomFflmPqbI\n/WeLtlW1mdaQsVORQm6ER6Xc6TYChIzXGwGIa6mmEgKNkx7efIcJVbuHE9q5\ncvRMftNn66ZtK81eJY811Rs+qs3ECBOZ0SkeY86eqQWAi1SZBT6wb0NPRJK1\na+Qi5IZKJRnYrnPIBJKGxzYXRR2fIaUeslh1tO62I+JgaIGUNXm/IYjTxqAl\n1Bo8C46FrdA9GAFXTHnXIFpOVZnIP5GQHtCwLhfGqs47SWfIiuGL13n40ISk\nwLWFdNJp0uZbALhSU06bks6gBc8aqFLxVxCyN5IYuWYBS8eBygCC553hc/GX\nBeG1/Fdqi5OT1nbjowYLHjn4UrZVMpHX6g5CcyBenAM7KHFGy6gC1sKe0fiP\nDrs+gyAQ14XOvefLQHBpmiyn9TmsVKIMsn7S1mrfJIkrcQ7adDYVFewUtGJV\nGY8w2PusaPG4yBoskUPGqnKz3qPOi5pdtsnrRGuN9S+lPdzepMNbxagir3te\nZOhtdTaqV51dtWYpQbLzWkVSdCC/TgRQgIcK0iXtYExXxlHkkx8DF1ckasDF\nmMjgHXBdf0Xm3RmoOeDCus5dPSsINcWha2PnoZZEo2g2UJXqgX1d7fXRZx/p\n0Lnm\r\n=Utkl\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"308f501e081a206caeb47416ee5dcb3511d9e55a","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.2","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","moment":"^2.20.1","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.9.0_1528471086566_0.106661311811719","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.10.0":{"name":"rendition","version":"4.10.0","license":"MIT","_id":"rendition@4.10.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8bd0ec36b5a482a371b39d52724624cb42a71ce0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.10.0.tgz","fileCount":128,"integrity":"sha512-Tuu93rFLl04S0yiOqm0tNLGtEwx9Z5CEXxk3t+eIuTyF55TTBPYoolBS85lNHPSvbthUhq4IE/woqdiZp8e6QA==","signatures":[{"sig":"MEYCIQCEzC9SG9uP9hR2Yv+O/i1Nv4RSeYTSkS4Am1L+jiJORgIhAIuug6kJx1VjgvqV8j5zB1Sywjkfrez8UEF7vFtu+5MO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7001090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbINj5CRA9TVsSAnZWagAAxnoP/16Rk3qrXfoh0xeB0kO8\nzLLptbKdfruScscGevCuUPethxTs8NlFHOebNyiPAe/PotzTTJpAfWHoDbPE\n+FberfuB90bA10VkQahHZo3dISEti4XD5zApc+LMTPQbDIJK3PmdaOlaRpWn\nxJkMz+jVbjqH4jcwIPmfhloUSba4rOXozpwIFUt9f3W4IvJzVaP2Lu0vG3qT\nmK/oqVdkBsF67+JzrzE7KSxWqy0sqw5+3PWMNQvVfuZLh+115yxZigeR/GkQ\nQeN1gKT1teH8wo/WJOVLqJd1t6tj6iYdeUUPUH6bHwmd7kb7XfMh0sijLXzh\nJpVRlWUDopJn88a97ji3gIoiFIB3hRzA4UYA/y7eAd10XWE/9n4lexyRY6cV\ndn5FIWPbSpPN4JkBGy7LCbBwKeV3Xu+a7881Sut5lf/NtoyMf7mGMpjYXibe\naCrR1YRh2wDxOz5iiJSc5zoPzUt8gum6TAL2DM+l4/2BqukWq2/Mp92PNLDq\nQK43/QTE5X9hYmr4ID2c9gA+NnVCi3FuzNfAlZj2RTVOfQtNVyoVy/0KwZxN\nft4AWOf4FaOL4dU0kAJG4EDlMXtyhYanvlI3nX28iZhyPMS02IyL/XoXYjBW\nu3OLHZ7biQcPYeUL08cfKLlzR+PcbGd/ppk2w9iOB+itzeb4q3cCJtqtVGr+\nEVEE\r\n=cbuE\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"a353e34c0bfc227341d5e52f01cb0f17b011cd1c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.10.0_1528879353305_0.2635867008044561","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.11.0":{"name":"rendition","version":"4.11.0","license":"MIT","_id":"rendition@4.11.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"a8c7d71c90f746c289a6f280b3e6d46c0f852c53","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.11.0.tgz","fileCount":130,"integrity":"sha512-1hz1q6aEg37eiLBE1wCOxBfyAYm0+n22VgkGqvsqpjJF38t4o7T/TmrLriOKtY8tZUUkPHN0iX6TUrlHXPfyeg==","signatures":[{"sig":"MEQCIQDcmNqFFyZ0PQ1eDc/vQ843AHblVudj7hrgmSBY3FXwZAIfR9lFQjFYcKYUOQcnQLRxG2GQzEWzZU/34AyJr+6SDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7010529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIS69CRA9TVsSAnZWagAAjNEQAIorZ+6PP3ojIbVxqTK1\n6kTWKJE0/CXhx9M7VlPNJ9qBhnrJ54CBMiCCC/a6dvcjKaH0wHHJt5ZI/dfh\nra710v6bs7tRaUUmr8Qtnua1dA9PZ72Fg2Q60sHRaQArFqTjvm/bnHvvIW8K\nenhvWEyD8/hfEA5SW01635OAcKhf0N1vNEQdfGQDGZ4DWFCkhF15XCEYMgWw\nD1j0/YrVghVhdDBPUDhwScO2u6HAyiSoUYR+x9amSo58z6EleY+Q03p+5VMC\nV3pSs9lRcMpNCxhr0t377twCm5SIBGhXfCPgpsWb670i8RXM7YvKuhcBvL59\nLdkJwsHMKONpTDi6Mb3txCQNYcO/VXElrqrf7knTdYvgzucoiq/09tg2Zfd6\nNEE6iHfshfRfimedliIlEaPuBlhJ1Y1peptTCV8BiDm4UX9ySltuqusEmeMK\nzMJ46ppEK5G0o+yeZsmoK+ye+TtbuUqpCv8hYH+7OKYlHruIPKANWK3XfoZX\nEpVeqi7sclCXoeG8xBZWgPUUxYPlvnDfEWd8rui98IpgmA27ouIOBhE+8rcp\naxo0b1vUSKaUlbeAaGkj+tbTS1ptS+eCVHAejdI6WjOY6w3OYiEBXl11jFmw\n42mnDhqjd7dxP6dviHOlY+CqIfgZG8PUNg9nBwqpDiAlB8HMmV8k5AtLARJQ\nAUFB\r\n=+qFI\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"ed300fbd1324ad4005c2cd13e811f1f22b1fd6ec","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.11.0_1528901308874_0.948699210809322","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.11.1":{"name":"rendition","version":"4.11.1","license":"Apache-2.0","_id":"rendition@4.11.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6f5feba89162fcb8e1dfb3685c1ee4365c1708c4","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.11.1.tgz","fileCount":130,"integrity":"sha512-dXHOcUgK+bxOcFcyzQipLMdVdxVmjo4wQPRxHOFVoAfCHnq55Gl+Ccd52TibyTCIKoSxcaLa68hyqnpHs9xR6Q==","signatures":[{"sig":"MEYCIQCGRZHPxU6ubHF1a4fTXnGwalEF5NweTR16Lt/eAXefFwIhAPs6SDsf4oX7IQirJNVSgnY8m+Gt+wpZleK4pZnaGX6w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7020849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIgmkCRA9TVsSAnZWagAAkBYP/1wr0qieaX4rj2l65H/Y\neLwrzwkY0CAD6pBFZkviejRm27/TeWJiKzUCAJ38tjul7aw44zYwBgagD1CP\nUSLgq/Jg6jfWPzv5wINU1BKB0Nw0Sdm2Tri9eNYASb7n3i6FhVT86btz5xCi\nF5qDCStOnfk2AKmC8udXHSwiPbjRnzgyYtXuL8HXF3PizGlusp6fvBpVjD+6\nDXnsRw38+NytJSTW6WKeIh18OFtsbvHgRLS/4HxiEf+NOf064znHcnPEmv3M\nuS/DT8Eg3J/SJVJW9xGHbsSQS4vLhcJdJ2VisH6ltG9moe95yn4zzKAKRHc0\nRJpBVcg/cGNhVfaYreXYqYLGpUiwj33xawn8ZoY5vfGbXD1351tvtf1f2oSJ\nLatKv6Mfvkn2S8fGv2BfiWY0Q0UBt2vwyH/6UottYH+0nfgdDdL1x2EPypM5\n8auHFlvmsd2g2e/axiH7oFg1EgwpxJtgrMejjaGYr67KQ2woKgTxMh0rqFkH\ng9rp5p4ndm0wNjKA30VCjEJe+0i6mkNJFXhSCeT54vEpIk7cd0/K/8tOsSz4\nTyBxINN8T4/otl7h859by03u7UnPVN1VsLjEivFSFh3J1pY4+EpGHfwCcjvD\ngAVl9CIYqMguw3Fj4Hq8+rDhcfafeHCUSpNU53G24WF0jFuIuVBGo8g93D7F\nNT9C\r\n=/tlS\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"9b76104bd37fe50a5209ed73cf377b2e4e53c244","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.11.1_1528957348297_0.043211305954115264","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.11.2":{"name":"rendition","version":"4.11.2","license":"Apache-2.0","_id":"rendition@4.11.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"acb45b674156ce5fb79fbff6f038131ee25020ea","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.11.2.tgz","fileCount":132,"integrity":"sha512-SJqOsnBDsgkQuyY8oPIVeAQDRgyjTXj6SuH7zyYlg7SS6w/nuttqlGhKLPcdPfiOCGh/6BSkVE/ZmbIlYTjz6A==","signatures":[{"sig":"MEQCIHk174K9VM/Zwbjb8bgcBEbh0ri1/L9hgqKcygc2kg5HAiBf4pc3LaK3B+M5wljLtZBB9LHOwBA6TkWBTGbF+zPlmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7022666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ3BBCRA9TVsSAnZWagAAwGsP/2oQe63zWtMCcjnpKpRe\nEQZH+Ikph2HaGNMUh4/M1l1r9tIEMJEr2xyaGXUtI9cNgxD9gbcSJkbbY/lV\n8jkmGJFPW1VjWxMfTE6zujDPOK5+c76YqfBe14+8SYXBn4xOgkPiH6VodLQT\nfBnfnl7RAkHljex0JODa24DD7C7KVJPu/xZmmKKtAUluKs4xag2ALC6DoXs+\n/Sd/8iWLWcyZcbZZS57Tlkbn5smlmptrcjdJ/iRpH8kyqOpg3U5fcI+VF6Op\nFsNJSM1IupDFzL2CH22deHhL9/SKm2Ryjb90x6Cxt4mIDqveo5YeHuQTvF1N\nSAtMg542eeQpHvm6KlvWwk4n34UwPlbMsNSydNC+cqgwth/DDQlv+ehY+vRc\n1aRQRE/c/MBnhF5fan/d1d6+Pu1gNFvVf/bJl9xS2P6gb71ZdY2OwTApEwNO\nYIHlI/WLap+vhwVekIyDume9MVZTsy7vQITYMZR51ywo093ULyqW9rH/4mE/\nI4zGWyuPhDjaHFqrUlGOVj1Tuy9NFNJZmKI0Pq7SSQQ8D/CSmUShFG/UiFjO\nMWShxMr/4nhXI1/yg6io2uIKOZ2JadvoEQVBY/NCUQko7l1/D+UaUj/FuDeS\nMN4XdtqVvNYIwG7gOfRQ8QDvVXr3LwuW4zxXEEVRPnuX75TlsnelwSkXzpoo\nclKc\r\n=93A7\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"57cf391327a7f26a2ecb447ad8be1834df660d65","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.11.2_1529311295788_0.7751008604483207","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.12.0":{"name":"rendition","version":"4.12.0","license":"Apache-2.0","_id":"rendition@4.12.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d5458bac9428ea51feb632397bdc60b2904c3a34","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.12.0.tgz","fileCount":134,"integrity":"sha512-aizXVecaGFzjb5cKySfzdy25G2sJMaYfW9TOmzilVRyRu8rE/m1nFFmuhTWsqHajHzHBLuz6x3leVqB9t5hJog==","signatures":[{"sig":"MEYCIQDK/46njVbF1PrIOH25dEvvYnVB4JAJHYiyDNL6NQpZQQIhANrmfUyyZ+5TV9qIchbd//9bmgz4wCrBsiBaShQmBnb3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7041663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ380CRA9TVsSAnZWagAAM4QP/2sd9JhgUY+nhXoLjBm0\nCHyggIJCG2iYE4G6zYfVy1PIg4vM8zbGit/NJjHpm+lnmfU9ola/fmOlAc6o\nYxvvlvTwLBQwPE9dcjiMo2rp6jydqNY+exUGxOymXTZV9n5vpwMe233J7eGI\nRFZDqxrnjAEo9WGP6ZKMu8RZsY/Hph/aHABj44gCYLnkqkncMSggD4Fmj0C8\nCdg87Ef1PD/3RBIiQQ+9maqCBUS4JpTN8DJ0TFzlhHmQA4O4yxe3qQsxic86\nJps31K4sXlmDQ7BBlNAyB+974iw4T5KiOAlmIgV0FYDeaSw3IMP1k3zG1NBY\nGRO/EnJYIDHJCoKtoM863IuIii5B6d/ddCwdXoc7wBTxEW2ecMBN+CC3lt9Z\npz6rSnHovLOd2NkHxevi4q/QbjKs7mk6ubk9aXXw5RQ9M3+m0OeWU72STJ/h\nD/kRdWVghpa+k0X2wuTcRESjp+PDDb/6mIQ5PoPClvq/LeEro/IWvv6QWIsY\noB+T+Ojr0x2tILlsYWsENyQ/DPiWUWEaAAADLnBbkXpyFtY+SbVL4aJtPxKp\nVdv+jD5oqRMaIoteGIDW7wxirIahS1Lbv8hPcDCgTtx0vqKoEyfvbABzlOBA\nIauLskDkcSARtv+PfMK1+/NkEH8RoX9nsy63IuIT/uINT1mh8cNmBKf7w/z3\nIvDy\r\n=FRUR\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"4d232d6788161cea873b5ca5e3d0ea318efe284e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.12.0_1529315123281_0.7435293674254624","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.13.1":{"name":"rendition","version":"4.13.1","license":"Apache-2.0","_id":"rendition@4.13.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8ee1d518d9b5999726096442ee83b4c8751416d9","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.13.1.tgz","fileCount":134,"integrity":"sha512-0Vb5pw4iABg5L1eKdLw7bU1E4T9d7VGo71fsqPetQ8ZryL45qGKjCO3qkKuUg0BYUI0naQC5fIPlTUYjEKdDiQ==","signatures":[{"sig":"MEUCIDYq97zAqWUlv/aooKk1ZbTNdufYR4VBOUutYQzhnPA4AiEAjUaB/GSf9ZDkutEXsja/CSHdnsWQZSonSG9rdavbtoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7050960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKipDCRA9TVsSAnZWagAAYgsQAJHranWgfDkApyZ4Ay2Q\n2wL0xQJIaxBFgtxkSaPlQaXFB9OCpppuxukBCKnWhjho9Bffx6DmORP0t6Bj\nnWDMpCsuoGENUQg7j0XAx0ajtc78tLzzGLKHw62G3KkcPoBaPaDAsqQFRHy8\nnkC8tpK/+r4ycipvskcPsIJhOJQnBtU4jEWC0wXWVRE07/QoZwOhIoel9+s2\nySSXe8D7YW0zbP5NVYr9Fe4MmKrElWktPzDQe1nQ71VXVAQscA1itFu0Zg9J\nGaEno2ABQ9Y7W9h8RppgoaHtzH/xWT3ujNd/7MxXnmSS7FQP3bOGo2b4B9b8\nZAq5CYF7g6o4qHg58NKj1d0gyx2Zq1HkrORNHmipjwqLG13bqZQWFeaugV1z\n3nz7/Ob4hEwSJEuNXaFKBiFwmsUIepaP3fVmGoZGaen6KCncM7dtz4Og0c8g\nc7xprbf03L/eULieU9XRRP6pAQUtzawGOLUF+h0+6yBaQB59H974bGM+9dWL\nGFLfgNVQxx+RAZrPJLA/njDVFiXgaivPXlyjGgYFGAslCe5D1d9xVdtNFCO/\nGlgEasdeAEo5PhapMy0IDHI+XJ8EdcPdo39g13nxRiHon4Ql6Np29WExH2nI\n70TMSOpXAkc6nPT0qxfA4dLu/4XxhMmX9B9iGr7cwYHDbIlhEITzAOYu1bi2\nI9Pr\r\n=XhtP\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"1a5b80c179d66caf4a5658753800646562f459ad","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.13.1_1529489986122_0.246603973072558","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.14.0":{"name":"rendition","version":"4.14.0","license":"Apache-2.0","_id":"rendition@4.14.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bb0acc83464cd982591261b6caf5692b89aa2dda","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.14.0.tgz","fileCount":135,"integrity":"sha512-X5Jrmm6Gkf/z4llf1F1nZF4oVAWogLEiR+K9yesqkDZ4EDCBiTZWvsa7hryjPdNqdKIH5gur1i6xGEWkhKEO3Q==","signatures":[{"sig":"MEYCIQCrm6eKozq3diFGhEJt4Q3YjMrMVjtxDqZsit3LJ+ASOAIhALArCHVJ1piEkmg/JWoOOL31CPXeSrwn6AqFJssp83GU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7242290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKl/OCRA9TVsSAnZWagAA5pIP/jZuAf5FfT4pTY80lVgO\nsMrSsLm7KE3sfDsfpkTjoglI065BpMjcR3zw1XTiREUveiQduf1Ali1EXigX\nwGFMYgp0piP8yfi8JI5Rs4IlP3kfeTOF/egEschu0z8Dx5lUnWXpSmgBfnyg\n/4374PpXKkgbZgNRUKYez8oQAOfRbwz4IfsNYPqZeyjccuZ8pwof6kmsoPcq\nImS2i2F7NBwEoQ5YRNjQdT9wvaxRUItW5C46ZpWHLOH0m5ct/KRbJONMKs65\n6r7LhovXWWfCcUapwhQEWKY6EVEEdH4S4tH8B3j8GSq1EkDqOGaVg1EBlHo5\nPtDrj4KzRsO+Il4jCaOcwmtbTIIoX5Y7d1Dfbn11GY+hiqMx35HiHJWytVmy\nWQAHLYVulHqAcXqpqUFPfpWKz9fLQUg1sYLmVsq2aiaq2u5IyjFXKLSX2v9t\nDvBucueQI0PEFb/+12ix3Am1Wfb+RolBbwWZpQ8OpJbutSRn7uxsuka+8ziV\nOzMcQVqLIV5MkV+oMvHo6J6Hcj1gcDhYfEjSGjWSCv3ruOURLv2jryURg0mg\nAtu32CIGvtgsF1M7ljknNPSpN1KiaNUH20tfbZLrWdwexYPyhD0I7rRcD2ny\nng/L6TclVWqYEtGVyQj+6UZhpQ9Aet7G2HujbAjX2AdNaqJtA8DKhuez4y1j\njLbk\r\n=LobJ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"313a90ea93a59f639ac193f08a0f70d72c9ba8a9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.14.0_1529503692348_0.44311268473733945","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.14.1":{"name":"rendition","version":"4.14.1","license":"Apache-2.0","_id":"rendition@4.14.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"85d9600a428b7b0a8dcb541ef54a93955cc241cd","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.14.1.tgz","fileCount":135,"integrity":"sha512-e+Faz0856IpktUflX54cHZDUuMntCh1OXZsO7p4j9M6FW+ffPub4HbBOdu1knt0WSaRiQQlFk0dzbBYfaLMXJw==","signatures":[{"sig":"MEUCIQCkRCxIh0xL2TuKDxhng33WVbRwgYnd+9rwUKLXQCGV6QIgJA4f3/87rMAaqx8zHW/DryXaVAv/L3xSNTHSIp8mYT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7241801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK6qWCRA9TVsSAnZWagAANjsP/3u+LLSwW/6bAbvWiFs9\nvCz+Odk5WHcJ0UgfjNv82hd5L3Hr6veZVIADg9GCSGnk5d1BuGs2FSB8qRM9\nttoPd3S93RekL5O94x1AesN8nNYhhMZj/AkZvRJJC1CnavSSfzDizqXljzd+\nO7NTW6pwLiqzRDdij8bNHLlLXuou5wyHCZ3pgqI2M6P/ctRGw2RjGxDfygV8\nRnuOEv9VBRaCJB8Z38sdKNCXuh4+3QWjKhTNwHm1dMRuaAmdtEV7Uf3HCuMY\n2NQIkhth1iNUnZ2PDlpxOGyZDGrYoOyYgW0cE6jNk8CHpZ9rvDZoKn+va6nj\ng99de7IjSiWdz1GpvpNr0gFCefrb05BI9RJjaUw7qUyi9mkT1Unfo02CUrH5\nrOjhUK5ZxWvXn8h3ndfLH73lj9WGxzfANG+JJiu7wYS+A9+EMPyRZpBIZ68p\nUD/X+d65OTMmhEgSo8m87jo7w4lL9jhW98myxYJmEsPGiG07sRCFc07FxmME\n+YoCI6SkS6/fdXWM/KqHhxnA0+1CuYRpUM6kr3uLQLEfj89B+g4oKS/nCY2R\nbvQjJIwNVa9SaBRi6pAxSjq1f5ZW7xk280PZyjfuLb3mNL8llhKwW6biGJ/L\nVq+zp0VegdIYT8ZhHIWvINitfzKtIjIwcIpRed9ztsxIH9EFjdSVU8RwC9HW\nh9RU\r\n=5e1N\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"d0a38456ee108270c18b104382226ad09f7098a2","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.14.1_1529588374175_0.7044279927457218","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.14.2":{"name":"rendition","version":"4.14.2","license":"Apache-2.0","_id":"rendition@4.14.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"aaf260d8906e2b27ebae3d987020adc4d4a4a566","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.14.2.tgz","fileCount":135,"integrity":"sha512-53jQN56WCQ1Lmb4VB3maZm2+mNrY55qdikuDi5gAHAqaQZ26VkTWrzhOPfLNeR8DiM5i9sS2KfDNCXULucj0zQ==","signatures":[{"sig":"MEQCIBzJARtkY9ZwY6XL+P2qQla/be6p4EE4dkwBHG115hhcAiAwuqfxhBchkjV1jla0i6WWWimnsxiLHDv8Q6AMdrhE4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7244718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK9iKCRA9TVsSAnZWagAAwtMQAJfaU9PxIxJspJaHjRp+\n8Am7aMTLrrvHVAx4bRtgnZQRvDr4UrgjrTYm7krsIEZooSliKELWdaGUHk9O\ni7bU3W1P8ECUq8smgQBJDGn88sru2Lj95QTCbElswSBPzg1zL66WMaN7mkje\nJJFfhcD/5BZYBa9sfxOUeQNtJLhNH/fKxdzPP6qnBlw/uitvkOSe4lrimKdv\nJAOMizT9tj+6VER7ys42d70eqc2en9KDKRUknuSBS5gskV/qA5X9Vw4nI8uU\nEEvGKwgHECk6hJYln3mcMkCX15dI7cfARoQzaw2fPyde1GDFSR3E3PxOTG/Q\nySX4BOau3o3wlGCVWYcEdieSXTf95ZzqxArtB9GUgP6xALgjBaqBo07iaatP\nKg53MwtnNPsUSqAGYFUTQBjnlwM1CXovCTzgz6lU8/GF0oWGGpktH/ECinfh\nO7DJmoQQs6wllduZHMRgdCky/p33fmuWs4+fw0rmgJizx0ZSKD9oBMNYQWxr\nFTtnG5T8fsDPsRU/+5QtFYCUWqumGLgCAYKqcdGRVl7NQzDdGYp64tbmf7h2\n+BD4zbG1lwHjWJAw69FwM4WMJtciUkAubpfy79lsFhaZTfZ3goEiJ9J5gFay\nPIJhEeq37rd6rm+09+Yr+ah0LQR7quTTeO1uQxu212eujgz3vgHG0LPT9gWq\n5aYQ\r\n=kYyz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"7ac08861eef8e68e1639e110c2a852e0677b0034","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.14.2_1529600138438_0.311935076152029","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.15.0":{"name":"rendition","version":"4.15.0","license":"Apache-2.0","_id":"rendition@4.15.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"208fa03f1e2a6bf010909fa331f29bc7d82baf32","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.15.0.tgz","fileCount":137,"integrity":"sha512-PJnp/7DEO5K96/VYHvAA0bP+gvFA8ol3U0AcHA6Cv292ZzFI+Zk+BEqzzay2xgwm1jhm3qxFrqhvBwQ2bwW8jQ==","signatures":[{"sig":"MEUCIQDmGR2Nz4Wl+qH5f23tibG2B5cTE78KK3KQLnHdNwb4kQIgakgC+4tU0t2wyZGujpj9G9a+U2Yb5S0vLqyT2UAGlt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7253476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLzJuCRA9TVsSAnZWagAAphcP/3rCLxwyvuxxoraArTGg\nzZdwqMqSt8FMPOZvEstltTw1zI3UACosutS5OeeZKFp2qLGd8fFJQ2anQjHu\nPHFkCw0OKWvg36X8gc74t3E3VrqcDzFsBQW5wuoRCLPf4M/4EKSPxFY6Cs24\nUfiesUQRI7ayYS5fK1aN+nnw9NuAPVv9yOOqoIPXFhrYYpNsjSusQuIvhJf9\n03+kJeM1R2rXu8j+knxXKpFvr6RqHrqct4u+5ixAfDagGR7Lyir+LNtZN4U7\nN68qDSSnGDinSBc0to6W+zXZYPngOOWOMmSnwb3moVOT8+jYf5zzlm/Z2Ow3\nJHFTIQ457EJN5INXwH48cxHAS5Bj7JtceueM8A/V9li2x91py6Z0dRuFNtVd\ndHPX32rLy9Kyx1wKTn2RTehkJxtKhWY+4cEH0zwXzFapQqxptH+AWDxZzWsL\n8Rphhso94vGyy7ZKyUlOe/KPGViFEe3vQPVBC1OFbx8kERewbQGe3qRQ8BLR\nwxHDH9IuZ37d8ohG5Qi0vXphnpk/ggud4V1pgE3CYEp0Waw4hwO4KuHMwGhx\ntxnwKtrQKNyUxQaJoZDCER6jKDK0fLdkCXUPHolzkS28cBz5czxMfDF+0tUZ\nn289RRvCHBJKcIJtSB/GJlWYAjX7OAN2OrWSmXvTOi0Bweq761YOzve75tYP\nlnbc\r\n=yZsP\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"f437c0589d6526916f0ca88bfc718bda31466b43","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.15.0_1529819758307_0.5637679209222712","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.16.0":{"name":"rendition","version":"4.16.0","license":"Apache-2.0","_id":"rendition@4.16.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"20dc6f9df2bec87de05a05d8e7e79f424372a213","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.16.0.tgz","fileCount":137,"integrity":"sha512-5NEni9kxNEFivSh1ahlYPKkVMDjjxg3E7HApNrPUW/snwk/2/CAB+laGKnYfrkomXXZM2CMaEnF0o3fuV1E9LQ==","signatures":[{"sig":"MEUCIQDdXpXBuDvuTC8mACQEyP+DLelymJQV+HbTnPO1Q9GJKwIgHFRnJK4ggMilNeWbkHlkhrtpYwV2ikrRDpYCve66hNM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7260627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMK+yCRA9TVsSAnZWagAA6UEP/Axs6GFKDZaTUp+95z/Q\nnucwFxpE5q7g7d2h+fmFL3O4NW4mQQpTFwXHk81Kjxzn2FyWF99vc44EF7SM\nW6g7vlXALDC3X5cPDg6L50+WuVA5i0PkTU7kh/gyInQ2FYmojMlQEmU/sbgy\nXbaI6iDLu4GONmRK0d5IEJBesV7LBRTxuCR8xGYrc1hgy/NV2KtZaxCMhVzo\nOshQ1ynRZAAD8vicSXvZ06EOG4/C3QVnMwkPYCiihSsGcBoB8jwkFRqaZjS4\nd45KLrYcB6/RRRGg9LCw1vHmCwKUR6xqjercCRNqM9gPjJAV/PS0G/GnUYlx\n5DGAhqCumwZwNQvpKFw6P34YMsq7TaAcz0pRj8aWT16rqEQxaghgiFS9kA8P\nXoZi0NVcnRoDedNzR5xi94Z9H4U8Ss4kMb3EWSZTpQDIYqm1hbx3kmf+tfc4\noCHR84aTtyuEpfjlOet3I7m2NtvBrToeAEacT0RtaaekFalXCCm87jhlOPPv\ntDfNiUH+9/DdoqYniPRGrUo8Ejzp31X/Gak1h2s7oXGHxRwBPARNlOALH1Yk\nYYUMdjtmtNr4EIDSay9douYdO+RdVIFYsR59LcGD6EZSm6FEG2MZoUSyenlU\nRomLmd9WMPZy6MDfoUBen+2L6ieECT2mvKtmj/tt8Sniycv/hAgXTCQnkzMe\nblju\r\n=he9h\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"72499fbe5374370d9534b4f5b3d7fe4c2027853e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.16.0_1529917361994_0.4230821522634176","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.16.1":{"name":"rendition","version":"4.16.1","license":"Apache-2.0","_id":"rendition@4.16.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"54d9d82e45fe778e391682a7606b7f9dcc922b33","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.16.1.tgz","fileCount":137,"integrity":"sha512-EEHh4sbbCFy/upeurYIxoG0BokjBZEHF5FU4LuKfMR3CDNAJaTlv6kEeDmTyMR48Cp8NBYflTWJj9bBKWoV+0Q==","signatures":[{"sig":"MEYCIQCiZGreuYwKdekelT+y+sJAYHnMuEBrTHt5CU+d77AuJAIhAK/ZVD1LJlRJgwvIq1uLbZhD1CUY9yxH8UsH9mwH3mrc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7260729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMLePCRA9TVsSAnZWagAAgZoP/19AY1bbNYsC2O7r++eM\nEKxwCUKdapW2a4lfKu2BmB2FKr8ui7Kfc6lw2w7TTpvtf7tbLhhr99FjiUQU\nJx1A9vGOtAsaUAkVD2ZoYSwbFVaNZZU+5ZG2HwpdBdF9FYlBIT9iunvNJRTx\nNW3mWiI/juMFwTZpWFy2dQ/hVqaC8OtX+q91ziFaktEqqnhTyHCb/42wWW54\n3z+rVLDZiYDm0GOzA3OxSISOqVc5um1C6h9ms/XhLoqA1bKyMDvcNFl+ycY6\nF/TsFYVEZCd76b+Vwfra/b4Bp2DCRB3SJ9A0rwDDkCAT/uLYMw/NYnHamDfO\nOffNIT6ZiZBSfzRNntORLbQY0XlDgbuVpL2by6cY+h+dvQRWQ7OfplSmZsR9\nAF/KveCCsKdly8CTb2uZn32MTMEI7A5TCGmEhYUEZwppNKhFUv4c20WkeGyp\nWkNY3bIQJllnCbGEZr+afRZfPY4nTatzgfBnWXkTysssgeI+ViX9XcxUw7Cu\nZlUynA9NeFWmHwpwFfFBlfKbuhbQRUP+DSjlKuTe62/g5Q4osgr9hAyUDpL0\ntc/ENmAUvFvTZFqbHknExCoNZ+vXd/PpbGye8OVzEPvvqtWRKoyXHHit9Rs6\n8VkqksxlnhQ2YE6aIuLFy41+1MA+v1UV1h1Y5mIdWJ4LhsKN1tRQFYRHy4zk\nBnup\r\n=iggl\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"528e1ed944471f8d80f167b32b9a16263116635d","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.16.1_1529919375438_0.7258129115224621","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.16.2":{"name":"rendition","version":"4.16.2","license":"Apache-2.0","_id":"rendition@4.16.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"86862d5f71a3399b9a986ee80074fc5b038ef561","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.16.2.tgz","fileCount":137,"integrity":"sha512-4l0iU631v/qSC14PhiG/gs17qZjb5iayW5UQAgWsiZl13Hs1zktwKf50B9/DsocYoilcPxGgGUBx2wkeVDQr4g==","signatures":[{"sig":"MEUCIBB+O0FUpGJDTlVbPt7Hj69xIWOt11gf6pEWuEJJlHIDAiEApJ61dXvisgm4ZDJfVb2hSEM8rFFrakdWjjVeitZhPo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7263763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbMN95CRA9TVsSAnZWagAAy0wP/2q+2qQoQOHYCfCNrQB9\n1dApUsscFei10NbFt1ZrCInYQH+/MY64/gRoUvNdTPIaQl0goWuNDfPmcui6\nK7nnsExFtjzBTZKwME9jw4pDZ8LfGWG9j6IMIqx36jr754LZLwIkl718g8J5\nW052uo/TBB6VPfltMXQqxxMW8qDKiPCR/HYPRUOrM3C8gI1ZEhiiy9SChgvn\naSiC60z7Ome8sc84vbHdNnYrjA48lomNDgSFgzg/dBdnJ3u14vp74mAnH2OY\nXtC2YWCZUyRnHKdjsg5eARtgf35kq//MTnaYyntetU8FgWFbzspg8WYjVCtC\ncm/qxK5N43WDAv6Er1TPtxNdDm/d6+gRNIpaE74FU7ZD4NFDN+tg8H8mhAHs\nIs/HeoE/f4ALVyvgka14G+rQdP8m1k60/5UnL3cfqfXxUEG3/liM4ThzFh/H\nlpKwyGfEjZQmwH6u+CH5a9DfJm94NuKsRvWYJA5Aolfy6RlNZqzOSM9SOzyI\nGgsBls3O7SlWtguW+TfxQp7v/8vqj0KJLiKMMrLz+IlLzesyiQcEqVLmst7t\nZ26xqb/Is2JFBAvF9J0IFv9gHQtTr3dP1RJ/ML9GpFpMeRYl7WvDTeI4UXGP\nd4tc+b4pJTsHPz/bRxwSIOKASAdWmrWfEh1ycq4JnRQaCRdBYpOUR0AZ49NI\nSBQ+\r\n=Qlpt\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"1374dfdfee00859c8ae8e6f1f05df22a4a2f15fa","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.16.2_1529929593157_0.2754946135844032","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.17.0":{"name":"rendition","version":"4.17.0","license":"Apache-2.0","_id":"rendition@4.17.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"410b8f05a6302cd094084a79671384e8603cbd18","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.17.0.tgz","fileCount":137,"integrity":"sha512-JyE/qVbLfIxu5keuSEqZW0gi/vuaOkusZHT/BhkA6WBT8XT4o5p8IzeJuBwo6IHzSDnpJ3jEFutUE74HiuWyPw==","signatures":[{"sig":"MEUCIFY37BOK+SjFxSiLB/qQbxOA0evxQbSaHC2HPybirgZDAiEAkid9NatY5Q5lTU8aRoLOmSpP0a9GzodiowRQH9J7bGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7271449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbNhZfCRA9TVsSAnZWagAAn1cP+wXGOoSS4HPKz5msTHnY\n+Zfq4UYUNXCS873AJ1nhZyakDlRbFEzcHKC4a+1m+GULyyMDxixiLrlhQQIR\n8Dzq2ymqFehTVTpOm/noLBgJkhFH6olBAkpGd/Eg3gEC/sdem9A7y74M9U2A\nGPtoDWoz+aW9JTJwabGeMY/D8CnUCa2l0IOmi99yJHJDdYH4JQpYxlo8pEuH\nzW9qnayDuP0xjo7/1Aqv6mtXFz1WIjfUJXTFMbo2eKOF3I4Kfy/2ptzjk5EP\nIoy/1o0raNUvQbouoI4WAaKdb1kd4pFtWRP095DRzBv8iG1fIHDHGmsK3zvQ\nd41coVUVzGGyctUplvjEXd5xtd9An3v8//qKEJ2VRQtT29AtNlMiktrMo/Gn\noA7bCEAi7eOmdoiF+z/Gn6VkJAZisTCv0oVokzKh6x6/IpFUMMDrzqFCTJfn\nBYxjN/p++P8g0DJSMVkDbIJp4ksIxjLu8SnFaDHjcYhHgKPJ0oZ84ehCm3C/\nX8w9bScmGOUC7nsSnr/AlPnnfb/0egdrJNDOMcy8F/Hr3QgdXNuMSsr+7SGY\nNBlDML0rKd4etDUSnO5AXa05IN1y77550Bj7IAa7oyfiXnAcvAqhm1T7fIAE\nLsN0fCQhCIAR5gulFQUgkI5XDR13yJC5sAqp0jTjrKMSEBk0Y3cQ48oGMgBw\nrMGp\r\n=gwbk\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"ed5f8382fbcab824bcd2c980cd01d83540589b8e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.17.0_1530271327394_0.5182335499434776","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.17.1":{"name":"rendition","version":"4.17.1","license":"Apache-2.0","_id":"rendition@4.17.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c17fef1907efde731f6685290f3bf7231f5d698d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.17.1.tgz","fileCount":137,"integrity":"sha512-mLF5TsCEeP32nl0sXbJ7uGRnTPuXJy2RdHGCZNkijL4uFq6tL6fnsZ8Z+HgEJr3wx0igL18Kua+OVgikF53Upg==","signatures":[{"sig":"MEUCID4JHMsu0Io4FDFoU1CljZnLMuaXPPcMDgYzqGwP1rnGAiEA3av+8Yg1OD6TDIs3w0vunFCTbSZFxSPqMP8yJjk7V/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7272509,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOduYCRA9TVsSAnZWagAAxz4P/R4xAFFxSMc+MTIRv3xs\nn8epIxMxOz25B6XCr9FCADKi4Q280ynlF+B9GF9XEE+9snvkfDFj7yNNHrcr\n9qQDxLBfL2mlNetg39KCSm1oD6Y2oFj9CawiMsGCw+ybfxu/8tVrme0K/pAF\nTZe8Zw0swfWc8UPS5tkIT8mqZstqvLk+xF+QsM0EGyfDIO83JVdFuNj31NNt\n3Ik3lqj22p+ydLhFZYg8MekWTvH8ncOQ18hWjeWoMCNiCZHIPmCbpw8Cl/nC\nJVrVSQrH4Sh3WVDTqExcfM0i0IFxVK2oMpur7JXUitqLHP7bU8Ljqlvp0ufg\nwxs1fSb652iiYVta2Et/82KA7isaNCLGljpN/VhJMfrfcz60/JYjaDOHum6L\nIA9KQCiqZoqPGBJ8fUGwrsx8BxdwEr7U/eqK+aDCB9S1wrf0P4Hecl0GYCVk\nWoDRUhzjjOLZi0sa8AJUCSq1Zx0vF4nHrMkHPgsFFgJOayjSR5IHwqFbjRau\nQrgnPU/J9NXUj1xjm3fxZpAxXFGwGsLrYt65XqiZ2iCikegCL262Qtv5v2Ik\nEOYtTwWhFs3+RMVPpfWbsrN6uk5xonPf3JhFldQlIIOscRELtbZ0y9bkpnwQ\nqtAf2y/vMpiXIQ+yeO8tcprKlGSBQCiy7SvYPWmT7sEzKlfMOqPREi/dCypf\nH4Kz\r\n=W7T4\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"ef544e9321698e65cede98e4988e0e4390483c36","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.17.1_1530518424729_0.2829828177356626","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.17.2":{"name":"rendition","version":"4.17.2","license":"Apache-2.0","_id":"rendition@4.17.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cb202e4c8ad11a0e356139023d431ff4e92a35fd","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.17.2.tgz","fileCount":137,"integrity":"sha512-90ldFkHeUnQtfnEMYBqZSoy4xG2KxetB5L9FtbdT7zhKHfTR04vsRCRx8FQuow70X7aUa14JD2KHXHVsoa2/rA==","signatures":[{"sig":"MEUCIQCZ4rtdNgPKTDtVYk2fs2n9z9H6sC5rZb8vIhSmVzAvnwIgQPgUlYtLHDkIXq6pUoqN+qaKmr/8PlIAFAVI3OQia+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7274862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbPjdvCRA9TVsSAnZWagAAaW0P/jC042uYAYbDOurc6Z+N\nZbOu1YqW0wTor6GlsAlySj0E7wCwsbjfoMekYhvzwCUt41G2hAP537/6j+g7\nPi4qkf5LxJ9FQ0rKrBI2CRFzA4hiXRLHQBUP9TJlE5HDttB5CZ0yLPJZ3/L4\n+9bauf+HhEbCrKcli15/tbdXZ8IfByyDdV9yhIYzLaWfsuChgVsutaYeDdxe\nkP7hF5SB3mjCbbJ/U5PNyYuCSnc2o4U3rG7YyEvzKOQQwoSj8JDzJHbDsK0N\nQU9JaeqeuEA70zPl8UXhzvIpdP667LFHOajPiN4f+I4cuAyd5NGj77c6ilvN\n/Cx5gYFqnJ4pjBEI6sL5X53GiBBSpOTlXc7hdOi0UPRfhdvueB0cywIG2A4q\n9WUHo1J26wYFO3olgki/grhYk5RH584T9/penxGn2vdwpBRPSDECCUyW1eD3\nDD++BpUizcBRTzRtbSor77++KtdnM4ZRO/M749z9Z9mpTJ1Bm6PZy6k1VAHW\nYDPDZYo2Dut5UzmFiyFWF8bv9tINDuV/x2efFEuCo1esjCE+AtWt5/Eg2f49\nAzXCmnWX+jFSWRl3xQ+GOYkMMfRafpekQB3MOxBnE0zmSEW8znWjbhHHpoGt\n31gYYWMF0IRVwJFC5HJhuJ1bcWdT2dmItFDcKvFH98FqZcFaQd2cdYG2djGF\nTcPb\r\n=A70T\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"b7f052ac26774b08716cb1484e7debeb5f3f277f","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.17.2_1530804079627_0.4768604481074643","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.0":{"name":"rendition","version":"4.18.0","license":"Apache-2.0","_id":"rendition@4.18.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4ef6fec1efc2e41ccd7a6a9c6e831046601ce66c","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.0.tgz","fileCount":141,"integrity":"sha512-v3p2XtiX9rtsmkW3MK4YuVnjrB6xxuMwWTk9b1kA5gCKmiT8JnrVEEkTG/2+J/EpBj/3aNdUG9ojDOQU2tmKKw==","signatures":[{"sig":"MEUCIBFNHvoCIbjReJtIWY8YVxJ3YKk5G+pKrixVmtODeDQWAiEAhIlLExLHYGupiU8hCWZCLOppehUzeKyVTcfRb/GDeCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7303418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbR3ShCRA9TVsSAnZWagAAyrQP/0PSBFez0wkCxM8aPvfd\nlGt3aNeZi/C7atKAaRpyIjXfWZ7zPUp8TZyZMTIaWDrx6kmU7Yhg/Dvxdr9e\newmlPTqM8i+Kfz/qzSsQ1WFge75Wc8eAiys2Ir7sHxRRw0UC8sPm3oL2l8Gk\nKswLtos7JnYJ1oPG/0NjiI7VKB3aQOHG45Kt7l8Bs5C3RJ+5Wh2+VbYqbfzv\nPmgAfAVwxSSdzQ7UeQUiKuSNAr5uO30vMqcuAg9lNp+aKvvfIU+E7FjNSRj5\nWEVZf560VIOk1lZzzuRjdZXjA0jI6wQGYXI4L9Cpr6sUPVVMS4aoas+eOLyp\nSdOWKfcj4qyDJ78ARQeYr6PmOm7NVHpReqWpQnFWXQWKJpyAEcGHTVBl3bzY\nO/TTG8kEEm6lUbUNB+r9cKYjYM2JSz1FeN+zQcnoYijatxdo3KqReU7TGbGD\ncjv9FfyM4KCnWrOgqPOV8mrkOq1hJ8hk02BmQ5EaJDo6XQxHEJW9b0MQnqkG\n+IcU7gW0W9HlA88S2wLL8UaHMiA6ckmNsblok0RHrHGrQ4Pc1qxaA13MDGSo\n5WSFUno66fXpHxMebDyPXgGpdqIwkTduoOIBgpexjGT4XyIAoB+d8SvOuZ2A\nHa1Yu+DSTBrznAYV8f7UegH5AQo607Vrh9Yl2ao8WffR6IiwV2yMAjMogAjZ\nw9DT\r\n=rX/B\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"f6ec82c5442e32da016ba6fe4c568003ae715a53","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.0_1531409569355_0.23900801982703235","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.1":{"name":"rendition","version":"4.18.1","license":"Apache-2.0","_id":"rendition@4.18.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"7102901dd8acf52e28b7d4d843f83abef89d23c2","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.1.tgz","fileCount":141,"integrity":"sha512-QCDDEYRo63Px8SGi1mgi5t0Q0u65xh1nr8ph1l0CqAcf7VToZUMFU4/cvDi1YQfyzM51Ju65UveEWJ9CdEKfYg==","signatures":[{"sig":"MEQCIDcV5AzwyVHcLvzhdCRybNIFukdVyDBg2gndCZxnZREPAiB6FAeiYx3MNfQ5ltQ+49eK6N/kzycd7YOgj0vqVbTGRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7303575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbR3uhCRA9TVsSAnZWagAAPOMP/RKR7+8ogQDLqDcoIpnn\nTYNNR8EENmajDcvoS48aOPRh5ZN+O9NcG3DHOW9sAeQxMERae6hwCAEo/ZIi\nMBx1Pa07NkHSXZQMRlLrLsBCl5niVrChSDM9P0qP8QBvWZKoV09Bpe7i7jJr\nKvrnY892SC9MaKJ9EGmU9/B0lfJP3jj6yywHahTH14rr08xv9AoTAMqML+Yo\n3KxjoMIsQoOuU8pwlfCq2ZtNtJHoftG1NQn8uluD0yYDoOhQFYwbv1RJjqgK\nGgmXVKStNVNXDFIDZGxQIURbOcpx6T6oUG8UQhjQdFc11Z1itjr1vxFS3f/d\nKbspmS82N4y6X6wVpmBGOu+8uNFJqNhS94V7daHURyQhqGMUpSqwRCFSL/1f\nexwHnrwbiYhJl0eUdPITvXMq7o8d8w/x0Pp5H2rNiRAaBIOPjGfji1Iz6rUF\nwlU/WeZZNVNWIwKYfrtK4968tUYHFE6LuD89/n6tsKMyvPQQmnVDmDkMpPTX\nWtmTWKK0SwDhTK3icQvh9sHZEV6VKOONBORR/EetTAcq+gEL7P9t2FemW9c3\nxQgCLsQpq2lJLBiMOUzCscEKV2KWT4rBsQiDHM9F+QxtgjTGzv5ZNojpRGHJ\n8c7njx3lXoWzTnai86HHrCIbsPfHM+mbR8ifkpspgqt8u8kR2pPRewGoEgRl\n4b9u\r\n=vvJi\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"52bacec277c1cc5da9673114eb5cbcb72d281e9b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.1_1531411361821_0.03515153615772726","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.2-beta":{"name":"rendition","version":"4.18.2-beta","license":"Apache-2.0","_id":"rendition@4.18.2-beta","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5f57b4be00b326b5947e503ea71eed935b17e144","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.2-beta.tgz","fileCount":142,"integrity":"sha512-WMOc1f3srx+HBeqG4l+Ypekx/lga8iulsYlxxACFSgy9wxla4VNJsqPNwiIwayt22yFUmjVMuSdVempakb2W/g==","signatures":[{"sig":"MEUCICsRLveQsU+r730HuJ+1InqW2rEFYzp4z2MJBXbjxdkqAiEA2wS5h2e/36lEGo+oSYSUDELa3BndrRglpb544CYPquo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4578902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbUbFcCRA9TVsSAnZWagAAHpEQAI8NYzAmDAFwI83pB4ts\nVnlFM+v7CdhpuE0Z82UBU6UJ587Yi88MMX6Fcfl9BY8oNsLD/0SQqD8dxuI8\nCAW8CNtorj4aaVW+ykystz99jErp6la9WjAyyWFQLHMJQXp/lsO2LmHo13bf\n9xF7Ydib3Ggb1x1pZxS04EOGEDSi5HG7gNVPqT6fIhKyvMjARwDnIadj7DUp\nCz7e3z0K1tbLkoWjVBuywUpK4YgA7Fvn30gijK0Jo/EIZjwfyb01VgFkXd7c\nRHGfMSDWYNVNzmRIz+v0IwfO6h8siZB+253O+cy/Aahr3/ey4xvygPy/R6OU\nRNPa9stRhHQ0ejXC33l06tTIN0Vm49O9hxocndjDeKR1ArEeWJu755HMuT8I\nscJCSNZNfsG+k5PsIRv6Wig8hLhvzT20Dn3MTVoUmdYKJTCZsBjskNH30+Iq\nx31hHZvs3j1Y75PAHhuQogP6m4tdcmOxCjy26pRBTATF/7noiqtsV5UiS6kM\n/o1fhNpEmDyRz7uA13gpXY6+XrKo+/WtYQrZvs9XZ4012lZX1zQX/EuG5jPQ\nd2P70xH+2dfdhTBI/xsbf8v8Bf9wD6EbPRqxfJFTfnl83DK8n5nvVBsIhQ/G\nUqdpjW7YRWpFI3IrYGgu3P4B//8iss34QCtT9247W2GCShlHn8uiEZZjaNQW\neHNv\r\n=4SnK\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Demo\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"9959666d52666060f56086d3aff045a019341163","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^5.0.2","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^2.3.6","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.3.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0","@monastic.panic/enzyme-adapter-react-16":"^1.2.4"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.2-beta_1532080476254_0.7416252665762444","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.8-beta":{"name":"rendition","version":"4.18.8-beta","license":"Apache-2.0","_id":"rendition@4.18.8-beta","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1585ec7ce4824cb9e1012bf3c2f824c1c88a4584","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.8-beta.tgz","fileCount":143,"integrity":"sha512-P38qdey5iG1RJQ/nQDAI4TFTheby8uI5BMa0PCoDenRnDL94HglePAaWySYzgnKh4ZDi7ZwPR59CySSa1Id/Gg==","signatures":[{"sig":"MEYCIQDCsbiDYZ5LGqbcK7929TaHrVUyoHFATGtav7cIAe9MVQIhAIfN9pEb6r2kbBwhr/8mLHQuuAFOHeiYxfTw+F5eYaDd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4537756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVgFXCRA9TVsSAnZWagAAwisP/ilq3cIpzlFBlGgB+GYf\n0OKrwuIF5NOWPCnz6z6lCrAfXI2CAqGg98+OvhMtpXtChVvlCibaEXqM+gdI\nCzgiulYjIf8bGYtYDl0UQP/3OB5+F2+o5UihaEPBzyssEA9+Pk6S2Xh3T2m1\nciVBbjZT4ekD43kakl0iAI1p4IV9t2bwiSQtyLyyybcEhOIKp/kypm0l3k6C\ngDaIL2EXwYEVkjzuPTozUDxyQTUFzxBrVVT7P5a4E/DtzNiR05DB2h8gaN5z\nHsUY6wDmQohsStOnlwqzIEeVZMdojo/0c02BLw3Q+lVmYY2Fe9W62vxafEvL\nbM5i+dSQ5YGH+KSFEIjtT4mXQfcxuC23/F9GoFyu5GPl34Co4w0X310wkBlB\n7ro03eK2SODWlevqTkR4AdgEwyYb0xB3UAGfYiv+7XBGlvM8TGyw29GeNM6S\nzGE77SonFIuqLU3owP8lJ39PCNtd0oPjdpy7Qxh0WM89OFHwR29Up9Ac+25g\nZJS9uE9PEJHzw3GbnZU372CmYFVoIIyJl+ANY+5W3LOOq2V2st9AImBm9LRX\nVWZLRgPt6xuBcjWeGbYdDMBidnbNjHuGLXoI8+LWjHnbEpbRRJN6kshX3LAz\nOYiuKyLIruMaWfg2UCUwKIQSp+emKAGtOAyomXXm+tzs7LFNBpYEAAdCDs6C\nc/DW\r\n=KSmi\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"5ec6b65d19b327d28e6a0e1830ec6cc28b1fa331","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.8-beta_1532363094936_0.1708535743256121","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.8-beta2":{"name":"rendition","version":"4.18.8-beta2","license":"Apache-2.0","_id":"rendition@4.18.8-beta2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5194b7b26c7fcbad8a98393ee6f6a8bb69d364e1","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.8-beta2.tgz","fileCount":143,"integrity":"sha512-nlmmbGFYQTs5B8uIHwy1fKsH26Bjx45RWn5csDE/cq1oFAJhRGh9QHqDUEBgY7f1ageB6JtnMNI3pDqf27/PAA==","signatures":[{"sig":"MEYCIQCdHslg2C/EZlbzhZkmq5qArSSC5YemJjBYLoDjfEvO8gIhAIMbrvzzPl8j95sb/A3wrk194/k4UOvp2MxeIhKPeZSv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4537757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVgQ8CRA9TVsSAnZWagAAU3QQAJodGTbwqdkfapeCIXF1\n+pNmI8UBY1CWjWd/m2sGN7BJpbhVHJJvXkmTjniPK68KSy1y+herI4YfG1Mv\nEbjSju0YXGbfrhZHhf6DVOnsdRPjZP0UZfc3sM+/K8LRLFSBBlRQ8a/pmxly\nG1Z9Yu5d4WPHo9JKB2s4Pez27USeEusYsZyfft4P/OGrnEfPw42bxHZrvxRU\nuFM1hqOD5BrYesqHqCRhkNVWxELD8jDw3HzSaxqoPgAy38bagyrjLaJPJRsp\nE9bYR1GCMApflruk6J9bwjxc9dJ/GerWIpf7PT75ONBemxVpRK0CA3eBXX1/\nuQk/kfEiZ4Adxq9uwFYxfspusYdW89uVcIWrwzelB4FXcf+e3/WY0ITEs2H7\nXivWb4LbdyZGzl90/qxb7yqIjXMIepAleGnX3p7GtBPdNxpeIFu1NIcrzSWB\nUiDtg4moVU22PhAetoUOG6KG5RAoFiDlvUgMQHyn+DH/R19Uc3oGdduNk/Ho\n54ROPDn2+3Nj0azRA9vLOse30MNRQr7R2GM733f5B16uRz6Dyb37RYMwn1YY\nr4MsyNv6CN6oyYEmNpkJ24NIXNUhdvBXfm2tvRtd1y00wNdQyoGK7mRw7Yg5\nIBqWBWKKmc660AFaA2r+WnWjSvut8V2OaKedl+ZHcJYolg6vIxDtv41AKPqY\nU3R6\r\n=2K0p\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"5ec6b65d19b327d28e6a0e1830ec6cc28b1fa331","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.6.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"9.6.1","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.8-beta2_1532363836208_0.6745444413314841","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.8":{"name":"rendition","version":"4.18.8","license":"Apache-2.0","_id":"rendition@4.18.8","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"25655c1245ccb6f55ba10f2854089e2087a0b792","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.8.tgz","fileCount":142,"integrity":"sha512-31Fl1USFdOwak6Ei0RxoCPcVJggrvbwVkPy2WOf1VIshNjFk6i8XMMQqRFo9cTZ9JJXrvvdmd+rdtvRFAEEsJg==","signatures":[{"sig":"MEQCIHQBl03XV4cWwLakpPpIQrDt/XIp06SndqhaMyrxMk6MAiB13s6dozLlG08G5k+8AunRHpvvJDKDO44VYRgzzEwpbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7319398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVgsECRA9TVsSAnZWagAAaGEP/2ThpN6BbPUKJlWYesZu\nMzpN/00/JLdyl+uNaO80CFYOPPev9+pJ/rBTLl0OYwTNYTYy6xVQ3SvwLXM0\ngCRars5Z4Eq8huuYzJGdOhQ/xQCqfpD0JUypRRJfJg6RtZHGDTPPSbfCLmVW\nVtD59PVb/mMA5MKcM4IFATdVsZZcGgSWmhTXm0lX6HraqA82QzbN6FOjhF99\nLYRLFHr5P2GaqX+nTrVCVcgux4jWqJ2cWv3u5i6aJ1xcXFGPMqtaSC36QsMW\nob5zO09dEmiY3SxfvnuceH1+CWt1LDNYAy5pd3Y0PI7Vfn/Nrcha6SpBNFBC\n0MHLc2afX12TlL28lgu8anwZQUH1YB+7yiyxohTgwwu6tICWF1EfKOqfD4cN\n9ZN0xL4JwQmzRD0HryYw/9+2ER5ojAGL5Puz6m5zEqiUrexNBjyyPTmOF5Un\nzvz3SSrGwaygWDFe+7P7u4nJQdD/7nk0f4CfMTkaEyqlzzAXivcrSYCEtvrQ\ntX8PfKVy5dLGaaX4ma0Cs3Nm5w1Z4VWDXfYXMLwiwrCSxsTVJf16LSvXJrsi\n7RCi4FqRYvEYESQbgmuJYSfsZ8K5zW2mx1d65OPcuMv4ykfYgV6B85vOdyHx\n8nG6f+sF5t6YfOdlVz+pWrXKUbu1gDROzfiTZLAMABZojDMqqFGA6CmYcxXM\n1ctu\r\n=2QuM\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"5cd87bc24c6f876b2141ea7fdda03b82da1f7232","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.24.7","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.8_1532365571951_0.888666022863714","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.9":{"name":"rendition","version":"4.18.9","license":"Apache-2.0","_id":"rendition@4.18.9","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"48362d4867101171b763c662b3bfd4f5773b64c7","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.9.tgz","fileCount":142,"integrity":"sha512-FEBb4wOgfKFVW2eJG5c6zNTXreZDAk7vqgqkMy11OQGdicxLkRptlDXwiB86ORnC15KoAym5t7hgQeytMIQv3g==","signatures":[{"sig":"MEQCIC21h07hR0Dpq1+vQrTfEPcSQ7h0sfx4S+I71CBoapC7AiBq1sSSbK8mKn2SrfbYUkUNp72UFZCMNdIR2xe3GcBAOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7319520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWGkfCRA9TVsSAnZWagAAJ/cQAJ5/rOG9G4VaYtabXksW\nAwMIiszTnj2pqILImjM1Lyh/pttfQ3U0PFKol/Eq3lMwsnGzLDDYNqDdtC1r\nPgImyAHIYb41U0OOSMHcr5YR9/CF66bsaM67mISMysMyYGF7OO1lPanewkBH\nuWTWZBEwhwv/3Fl/NpddjfKB69q25pkQfUZ24jE6Hs1mdZO1WLC9BxrrcrL4\no7stJ3VoSGyuZHD24/+R5C9aXQOjn6gMPYzdWNnegmMiWaDLcHeZLAQYLlmU\nq4rPeA3p7tNqQq/Pal3AMt/7Sv+e5u91ueywks4jipKQHov01VUk66OQbB5v\n/VXAAVGPCboNVr3wnwet85UGSIwfOgcfxiVry5m0MIPykJTblgmP/TyxuRLM\nx/uw9ASG+Ry+jJbOkPVbTSL+Vou9Fgei1VCCdRujj9bCMtFmq3Tmt4h5v0jC\ntVuCMf2MqkvOaRYaMDYjuUWSlnT/jCfffCzQAFGQ6OW3Pc8c31CGsRAB1AHu\nRp9d9riSrriui5J3by2dretGZ2EAUHM5RRgiI9uqbF7Q1f81ftwh9jE44Q0/\nNEXHAYYGPchQepL/8hcpEHkORHhSMb6L0+rSz7/1UespCoH9IhozbimJHqVA\nXwDM71+X46N4XKUbQp2nYFFYijXeksTjy0OnHfsHUadMlJdQdE35RnyeGHFu\ndBIE\r\n=HcUx\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"183ea3f2a75a0466b6fe244561ea3ddb9270e8e7","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.9_1532520735014_0.8220342745644131","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.18.10":{"name":"rendition","version":"4.18.10","license":"Apache-2.0","_id":"rendition@4.18.10","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4d86d159758ad053758bcc2ac1e4fff6b9f65f5a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.18.10.tgz","fileCount":143,"integrity":"sha512-44E/S3hIACvfxfmg6fK9g8pJHYtgv2freUBXDg0svIhvcDYyCVcKBc72GfqMCf3JtdEeXM1A/QvV9k203IMN8g==","signatures":[{"sig":"MEUCIQDGQ9sAXwJhBO1I0sUga9x0gk3+0+4GSeiUSC+WrAfQBgIgS8k8JQEsRwXj4dUrhIq8oMfBBbA6TM1DA6y1RwqaWNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7323709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbXD57CRA9TVsSAnZWagAAizIP/i+MgqdNlZzM2jJyhXP1\nsIw7O89RCMkb8VJNf/7T7gB3ksGl9SrPQ8AZlA5fv3u6TUsjTShz+Ruly9CW\nTDI531UIPqESHfHDxsX1gwCMJqdUqbwzANviU4B9wzidfcU9kL1CV/Wo3IT3\nfDE453Rox4rG7aixdQdNdTLV4t9WuL9On17cIL53p2P5hC92Gaff0wRL78w5\nvB4tovOB8JKGaJBCtcQXuJ4HilpOkdsCSN6CoArcEE/Kk6CycIobrdXAlhh4\nWgouyF56+D/K4EzHFrq8jYY44x0Kjb0hRudoPbi1AHaSs8FR/sNpGAYBFL2l\noRtL9RBQPD+EZ+Hwn8hKOMguzz78/u750dwB4RArC/1KLrgOROpEHiwsFlUQ\n2YBJj8UgnsjdPXNq/jJ63r5dErQnHHaDccDIlHdMgwZIcyuM4V/A+7czvfJN\noxEEljPgODLS2GPltPqrZz24i+BbvCNSRe2ho5695LaN7PVHVtXb00x4FH5y\nSzguB6kUe7k53/KeG3THz7VX7gw6G2l3Nm2rJ7F1GO4KoVDTl9wdAIYvFAx7\n1TVZpYYF8DJmdmhI7rFZy635xHsXo1lePz2ICiRtWOEb2jeIn5Sky+Zoelym\nfbXbNGqVFSSKA8eyoDl20dhw4sBo5pYGjt+OMHHQGDl7Y/JS9D3IdDb3Nupx\nUZGx\r\n=Sjyu\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"7a1573e4ac1d5342871aaab55475a2e69a47b4b9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.18.10_1532771962616_0.06494064815756939","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.19.0":{"name":"rendition","version":"4.19.0","license":"Apache-2.0","_id":"rendition@4.19.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c3372d49ed292644b9b4330fa949a276db1c3a0f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.19.0.tgz","fileCount":143,"integrity":"sha512-mS8dvjvNA7LSMpS4382iScML/wNqD2rkYP4ILvTUDfUhfPDVaNZPTrvwc0+JWxRhXaGHtmrbda01EgnTqYdQZQ==","signatures":[{"sig":"MEQCICE0qU2wmGp0gIzPRTHvePTDGYjiBS5+352d1BfsJKANAiBYTphGVtcEqPUFyk8Q5rR5GIbsvaSxy5D++kE6FNjjaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7327186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbYq/LCRA9TVsSAnZWagAAgucP/R0AeKHHYLaLBdslXdKN\n4OpCIZldhsm+x8KvzeQLLBPR3HCBrOWJFmZX7+CINQj8X0o0ox5idq9hab18\nvIasDI603SvluCypK6MBbTNGWUfKd450LZj1VOw+c2njPZw8meOutbiwYsNN\nNnoJYrPoe2Vse6MRrCaEsvDMpA/FVTJPeZfvqWHP7saY08HO/A8hxb06/OlV\nFWc9ddmugDnmRyYS868eFX0pAeDEgnR7q9IouAq49XKFFo8yL+5g1CeHJhJ9\nW9m0g7hVDyKNaUW2mLi7uTBcBeyMzSGpJJ4HJwPyAJ1rziGSZQmcaRyV1BOk\nzQgjnyIVqxLtvjtBkMrqNtIbHf9vB3B/zaBsnOFSSDgXZz8gFEMir9PI53eG\nyzocikjGYEYP8KgpBz8fmZUmsk3JargBjZWBPzI+MVuQCjiAoWQKApIVOkXq\nkI3QJWhT/xzEzv1Ya4i7GG25XXuHX5f8mGWtkwe01XL3M7apDNj1+lT6rmKy\n/tAo7zj8gZEMSzSgeUZ7zMWo5JawjXSyN8u7Pxe8+p6fJHoSCoPpuTc+LqVb\nKnbp8/IEnT/O8m03eNkLqAL/HlmBPM5D4tN9SnLB9duvGVEpdropGX2JXFah\ntQrWVHihCPGWWHLi9P7RmIdli6DufcIVJsiqtvaVnoaZlt8nPUcUhF3xrFlj\nqCKv\r\n=oZIR\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"79a0f1f8714f8cf87daf8c76887a1110ddc44a02","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.19.0_1533194186445_0.48889317469238214","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.20.0":{"name":"rendition","version":"4.20.0","license":"Apache-2.0","_id":"rendition@4.20.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cd8ab79ee2b8557c15f2518594594576aea976a8","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.20.0.tgz","fileCount":143,"integrity":"sha512-4bIfxomQgPQ2+mAYIt1uWee7RLBzlb+E0ltL/tvGtBZLFISlPB1EiCHOFTcYNVUHTzseLozjcpkf9xcoSMTT1g==","signatures":[{"sig":"MEUCIQCZ6PygyjhqECx2RK61bjsyb1woswoHso+COgm+HjB2CAIgEaCgUI9APl9xHicJjv51JmBhk+w1siZPxiSq9FToOeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7328214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbYrZjCRA9TVsSAnZWagAA7B0P/1lsPwrrHXclSSE5o9wa\nq4YPi4IxJLxS5MDyyw+1/fBehs9zPLkqIZYuLkfssw8vFDxvcfB5WLJF00nG\ndRWJU6WyzPIeTHmc0Ne3yzN/29Uq04JYZMKC3Qv6ndOKq79Q3aD9VA9kl1sA\niFK0TFF1poHzeEClVDiGoEkLVm66zjrRnD4FRp1F+3CWkVaHCD7JDv8ME67Z\nOFhDTlSGz0uhx1+TwK8ygxEQZaBD3WXwXZi8tabDuYecTrIYkpMpjsQ1O0Gt\n+4+FQdHptS0bOBA7YS2hCUWKzq4YYHkF8wQXfs3oupO0n7mK+tdIjlHaGrpt\n91Up7NuHrwkNHmEMZOwKX8HOpcq/DVG4eZKT7Je7rGFYHQ+4kXU5Ag5SahjE\n0S8mm5xTbpf/FXyhiY4Wr5RrwT/77kZyh71wIgDuqdt0U0Cih3bxSdOoT0YP\nxfiDGPT6zsWUDnTXOjUonMLlOobSbPW8cuW+DxUIKIIEkhYQ4SNOFlywOzJt\nt0/kvLNX1O+B14LbtKj9wKuOKTrXNrDIJTMoI9mNxWE+esZJzVse580XDGzb\nW6vGmNO6oDGWBgdjg9+otlZruJZUekw+/OgRtwNoa2QH6RIhVFcZ+7VhC6Ip\nB+OIGPV1WzaQ47+0QdHdY389N0gy0enGt5dhlLV5fQ6bo3WTgbrRFj5tZ45q\njbEb\r\n=91Hz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"ffb04e2094c8a5e302a0fcb0238512b21a764529","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.20.0_1533195873996_0.7100294355323211","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.21.0":{"name":"rendition","version":"4.21.0","license":"Apache-2.0","_id":"rendition@4.21.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"838af705a34b8a62dd1a3a74347fda604acdc2f3","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.21.0.tgz","fileCount":145,"integrity":"sha512-lM6pkZuEqzfwWVePZKXCECsKfLDvwRG6CkHX9SCw4zxVGSjuDxslx7ZY+ssS9MRMMr+n4tuB8cC+iQizoMVKWw==","signatures":[{"sig":"MEYCIQCbM0xbP0jYgPoTMWQh+1IoiBZPJmI5+nXWLZ3UIbiNqwIhAL5/H9Z9I0R6usvtmVscP1qcjPTwB1FP/cKmBVZpTDpm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7346400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbYto6CRA9TVsSAnZWagAA7oYP/1Eaq705O5kEj2ZeJMYj\nElr0aV0AFbOoWRyKuKx4+DZoRk1ef4Y+RJ3/kIpCy4ujH0ZV4NEOXm27g9Ax\n8CXpld9V/8TOHcHzQIEL6vBvzPbCs+/6sOPmQ2tBOgbCjEwM8DTS895Vr3kD\nql0KYitfIarkqFUJAK6R2vkCqibFNLLmQ2+uzjLRbpkqIOPanJfNfxo2LeQm\ngfZstIlS6QdU32xXKhK5Sr+WHGUCkJjwYBToLkDLEHBPRN7C3OL3Ql5hSzEX\n4AH0yE9sjsYu6Nyw6QZanRlPYUHt7pncJHUHcJiNWDS1jyWqwjtc4qE0lBMP\nM0zpmOMMGRHTaCEWZvHqkx+w4I+8zpgeFuQ0gHBBpR222MUDT0ymG6p4blUp\ntO16ZYqzBX/Lgr92pGnuyFO1cO9tq+08Suckfa+/T6MxSPFNKNuEcroV+W/Q\n8sbyQ4BNxg2NHOTMUSYTh6woBcN+ZatDHL56A/s0idq9IsA9S6Ctv9NtMfdS\nqV3Zk0pTfxPbe9cR1kzy/KrHBVbWufzbbS6YmFZW7qg4W04jZsUVKY/I5BZN\npW/Lo1P0PXGbssu84HGNd/NvUyBH+J3TdZjDBZLKoUJgQwymJ9IL7nORQVj+\n0AHFxJJqWyLPK4JrIbBUSpYhdXu9VFhX4quRgntkN9nJPdha0EkZ3uRphT6l\nrdG3\r\n=4rR4\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"9a2bbc58b65341dab645dce3309a7ef71694529a","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.21.0_1533205049575_0.34032144376761475","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.21.1":{"name":"rendition","version":"4.21.1","license":"Apache-2.0","_id":"rendition@4.21.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bbac922ac85b62e69a2419489f9230010a2b962a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.21.1.tgz","fileCount":145,"integrity":"sha512-AlBdsqJk6MUB00iWZXKRz2Fw+Np+asj0Lqlsr7V25ye8g2u68dO/yLsPJWYdZFeYIww5fUZikdYRqTxgtOsEAA==","signatures":[{"sig":"MEUCIQCDkcuiTqualIREtBvN1ifSC0rR6qFF5xrm8/T9qYem3gIgPmimCk6NK1Wl3gEZqdxBUpiLVLwLPgWu3ghXjO9LB/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7346728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZCMdCRA9TVsSAnZWagAAqBQP/jPy2uRTjPXH+uJMo4C2\nwEW17qtrztyVB//PKB3SHAZA81OeSMnMoDEmuXfyWQnRmg+CgkKacVciyUMP\n4bG7zTxsRue7mI1Re7COmq/WQtfCUAkbxvq0vVZnSolCuGog93p2BlG1Zxy/\nrPm9OmSX4FACkm9HQN5M37B67asN7i2A5RcikNIyGqZQNZtIqXI045OGtnKy\nHSe0KgMQNTqQBs0Ij1J+QPTarJ5YjgT63fQYbr3WDh1/FsY79P2Wdo8LwmlC\nfBZ8VPw+rf6rdknup+Yxz+klpo1tjqrYsPuJvJg4XIYGTMBJDjPFrOwTRqN2\nda6PrZziAJWZijFbDeN5bcwJj0HtXZIntBgmo9x7SyRoOX10kgmgYN+irrxD\nJ5Cg7z+zvVP8yRExXXroaE35DK32KxFaeRQtIZ3BLLThipex+i0XIWASc0mK\nMfNqVYcGG+lJh41hCdhUZfR95zU6Whj1Uuja6sz4hTus/ASgq2rBf4Aar0Bs\nyGSdl6r1mgnxdBeWQ9KWA8lWYqbfhixdDoQ8TYyhlDDxAfpamkm+tZFA8IcM\ns/r8oV7xe/XKByqUv2sFTWw/F1WioYX9ubwqWNGW+MGDP984GjQLLfm+pqAH\nNGX1ShA4g81jwTRtO0s4+ult+527PCt3Ju3uFm1mypmcjjU0SzgQPgpOjyos\nQiSn\r\n=vwLT\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"3d8c948ae754b2a1c9a3b6a221e5b68198410c0c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.21.1_1533289244911_0.7259374978738462","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.21.2":{"name":"rendition","version":"4.21.2","license":"Apache-2.0","_id":"rendition@4.21.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ee5c17c10f594eb03cd344513a3ad311664d7b2d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.21.2.tgz","fileCount":145,"integrity":"sha512-iVEsCIDICTtb1M/qM1voFhoh+jaS4/3XoK3bLpfKfArppTVCR2MHfQRugbCHWwOKo2kbCo7aQytP/Ymf80f7fg==","signatures":[{"sig":"MEYCIQDJ4/cmTmmRivKYLD/E2pn4GySvzbiqgAiPpprvvGURQwIhAMr/tNTz5BkozDlyH4zULt1t1Y6v5deph59F3dYanMhR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7346816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZC0tCRA9TVsSAnZWagAAyhYQAIhwyX7kkaKwvuXe9Ugx\nSbeHBZqRC8cYY6YlEkgjlZ2kIMijLwLV50uLXbikWdwirKvuYCd7vSbcqu5R\nQmmMuu/7cDZGQCSg8lB2LOJPZEEcYAejHpLVTegK4d06eOU+L0VQhsoUC+k4\nJqGifLKpTXL0srY/QeaEZjay5raH+mZfwiyzp5hfhyo28fpHBEYH9Nv57jYS\nLv6y4RSv+OzZWyytoVpchqk8VGSUcy189lgJRiAwmdDPV+2W4aBsWof1QvVN\nkuyTCjZ3bhupYssPbNKGL1ZzgRX4OHLpdyCfG9nvD7b6Og5tJwdgX1y81k3Y\no4vGz+jo0ezZJqxyK7gnCQdp4Kc0UPCP3WC5xtL3fB/JkrB/SenC2yvPAfhy\nHQkEnB2WuYA1n62lt+WIxm+xaUL2QtmKmp/nvtRUZ1FiSqjVttYqIqxBZgrf\n5bj/9EgzrV6PsaV7x89dJygm+LOfvJpPKVV8M+RCXFnomrJzSWOm7js/7O7q\nemFbXySWyPlYvTwEdhb1REsTlalJmavteGaM66bOOVLGUMadCUKkl7C9bwlo\nNApHqC8eBmm5lIKYzJeWF0xJ/es2NHMIaqhyL5GLlOoWg3Ivi67APk7T295X\n7OQCCjC51i9NkksXmQUjbgf0AlKb8xvLbnDDTtR/V9Bze8rhEtWXe4nFoiO5\naWPx\r\n=O9Dj\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"16a0f6c7fec2416b2f036b084f6d0bcf2924e9f6","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.21.2_1533291820912_0.32822972367345304","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.21.3":{"name":"rendition","version":"4.21.3","license":"Apache-2.0","_id":"rendition@4.21.3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1c03010d2866ddc23f7a57df3cde03a5d76f4efd","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.21.3.tgz","fileCount":145,"integrity":"sha512-gphKLSQ17u1QfIDjHboQVtYRwTl8lsyAs7IaA522N+NYAf32z+7s8dZpmomInKa6EwNKdqwi1ut86EIa72jiEg==","signatures":[{"sig":"MEQCIC47oSIkzT/5YhDCqtHt8yxAV17sOKm3HUukZi9nzgCRAiAf+sx4AVgX6V7JMehTfPS+u/ljtK9l0FRzpUHEcQqnYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7347498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZDiiCRA9TVsSAnZWagAAWygP/igBilQfkQ1ImFIu9lP9\nNRyw4Pvrwa3l1PpGFLvh6pvV8o6brpWjPKAekkSkkle1GxIPfaSq7RTaMQOa\n6kFxL/I2vRqvTAlBHA14PzUbSgPOEQxMAlGdS6dZAfEolAGdKaDvlns34eh6\nt2onTzWXP39ylSMpz3oTne6u/6gU/EMHAZSR8QiiN+p/1t73MypLQ9RXPQ8Z\n7sfmm0bE9eWZrVofBNWCONvkY379h2UmoOOoa+WcdBFkFOXvdVxPxi6Zxn4I\nFAC9b7EDd8X6HXA5NZAChPv+ZOLQHdqOjRYdLLC7zpplbQk4e4KlexFsbgIh\nva7eNY5tgVw9fssZ1xf12u04a8s71Eab3R7MtaRHxZeG37ZxNi0Ua/+xc+S6\nfAFJf12TLxFVPD70iS82OdBrCOTh+IekIXebdHGxFK+8LhLjLH5FjvoOFoEZ\nDXLEUHGKvnfofR2umRvbkjHWJOF2vBvYzUyu3edu4Zdm9ByINqr8qy/w545y\nf22WTDQoDzsrTnBgdm2UQVP7DfcJG/vAwwP8OKaVh468diKBUBLkp8k6Z/FV\njoarJ3jrPr4Ve5udZcGnP+AZon1cRn5K6U8RKv/aGv8VO6fwdQQC79je9Txz\nqXVZ/jdbP7sMt+ezUoRk7sveUOArN5sUUoTzEF4DO3YVcV6b3bn4RKoOw8hT\nUb9i\r\n=9g+V\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"cb87bb971f34ebcca47b1dedadff5e9c9eef13f9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.21.3_1533294753541_0.7430405923215271","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.22.0":{"name":"rendition","version":"4.22.0","license":"Apache-2.0","_id":"rendition@4.22.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"f79ac3dddf2a6f7cfaac7d6f262f9eca92595eff","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.22.0.tgz","fileCount":145,"integrity":"sha512-r87sIV90JGNMK7rto4inyG0Ip5aT21JqLaLDaGt4SMajRpiQ3uWp9Ql2RnXTe3W+PigtYEnQz2yuTUe93Q908w==","signatures":[{"sig":"MEUCIQDoiOcO9ZIu1x8g81WWtqFsyrCKcnEKlBmvYDkOQl2N2wIgWVSpxqS1rFe2a6XvHF8ODMb8citO1cPvcrMnCFvvS08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7352310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbZFYsCRA9TVsSAnZWagAAIGcP/1ABTLVEzO6FghCSOn+J\nLbAsmrwxRTeOXLBEpB+3LgsOma9q36hVoOGADBjl0V8A/0AdgwqzTWtDKkC3\nNqt5IIlDaQCEkMj3MzJYKD0KA0159orpahaMSnjLiMwqChc/NaOaCk7OlEu0\nOLwQolBF1hPeQyKXXEpSSr33KQ8XLYvV6adbGQxp+kpZbNbNYGkBTxK91+Mz\nibmM2MYnPh0bugcTufDepWh4F9QaQwmyaaMHBOWQG1VG4xcFQhOZsUpTF9pX\naTis+7gXpZ4nwEQ1SINpPqru6fBWYqzIlXZymefB5cUi4D73k7IhtS1Kn0Qc\nduKEjxfRjPYWTnWhM2gd07Y91EfoB/aJkrVLB2GiZTjGKDiFZdC/MB1WZX74\nO6xY4Ewc/ZoYMGY9os5XsgEHfVBOQgkrFNcebPIxww1hmpQ4LdsH8Ri91Mvq\n+PWynOlViGmmOjc0tkDSvX0bWPDI/ybNgwMA6reZDObPJ6dRIDJ+95sP41j2\nm3F54LHqbjPuSlSFu1awA8KkeIBZM6Xv1ds6LyzExqhihCYfyWzExJD/Vw18\nOBU6rGy5HlQ3j5paIwyiKG4acMenATje3rBNoE+FnnD1sqsHwLIB15bt6Ibq\nBRC1Z2CmSselUJTLDGckW1FfUAoeAat96ZjTt3Mz2ye/npGxR8GIxFpqgBcu\nz0P5\r\n=+nbL\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"2bb047d9a59de4466ebfbf0688ce8ca337ba5ece","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.22.0_1533302315493_0.5030361693076777","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.22.1":{"name":"rendition","version":"4.22.1","license":"Apache-2.0","_id":"rendition@4.22.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"878d52eb5afbc4a5462e127a449e06150b4936d1","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.22.1.tgz","fileCount":145,"integrity":"sha512-Dmtb8j9dSkdkN6bfg5HX+gfHNFqAJYOqqReuZNgoWiE1DIyvxbLs11mJMPd3Joc+yt6K838Kxp9BojWz3fbg3A==","signatures":[{"sig":"MEQCIEduKRykGEF8OQMaTlZqPXTwVtBAjjqemYS6UlfCdOS7AiB1nfoZfPLcHfv00xVfigPJl1QhGkFsLuM37n5IAq8dQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7353326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbaYV8CRA9TVsSAnZWagAAGDYP/Atewi3nqmPDcIXE6CFR\n3HLjG3kcMzNVykUGXnPJJP9W97KqXhvUOU9YQSQxh+3pvWmvXiBJGUCDkmu1\npOqNKJr8tnXfNGOJdxwdHiXxqIRPrHzChyrvBuM5hIIfsG134dllJmN1Azx5\nS8RmD5q6c9cSiKnp/XXKqgmkkfcl4CIvyeRRIF8GJykHCHe0NeQR7lR/RiGw\npnZTLZDhjdilMIqliV7BIzzYsg3CnMCWDdAEbLXs9a6v/IWdzMICnWPliW+6\ngMw47RhVWcwcO8IMO3ULHMJukgOWBV6ub/Y2cJ6g3wIlXZGSr31MG+iz+JRB\ncYIayvIdxp/Qk5bsFT9cw7GSd40Wjx/V3Dx+DKu98+pPUbYrELHfpAkHljTX\nDVCYfLMjj7zln4ycv9hXSxt9vDfzm4IyMADr2kqi7oSfIS4SA7eEYR58swj+\nb5bBYcudqE0t484y1U/8Ymg5sBlfC4eKUk1q+AEoXVG2a7qP+ep1UK6r9a/L\nog74LAJ6xxLmL69o/KTVQERmpcP9POmsVaOrVBUi0IfTc/mbn+xfSyUa5Iwa\niGJ8yR3GNV2mIrhs0ttw/iWTnxPXX0YIKhduHm0kOPzjIhRsgLS+GhvnkzlG\nURpqLJe4QBHwRWSEMy6+EmcEmz5mfutjHbR2DbE56tm1Pe6CVO5YZmDkzPWN\ncQfK\r\n=IHO+\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"6e4937c84802b3a867905de00ef16c05101a2949","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.22.1_1533642107693_0.3602407836856347","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.22.2":{"name":"rendition","version":"4.22.2","license":"Apache-2.0","_id":"rendition@4.22.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"15108de242a5587a215942856c24f751593e6eda","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.22.2.tgz","fileCount":145,"integrity":"sha512-lC0+bSyqqsyMvlONGmLBNEpEa9mxpRMgckfG22EffzKBFojy2DGjRkXxIDzwivB0wfo+qvZrT9GnZ6RCYFYlJA==","signatures":[{"sig":"MEQCIC2qlpFqxTTGF0wa/msPbPocKz5UMVPZkmo4jmtAYyeSAiAh7SqyYzuoclW8AnU+7ZK+QmrwTSdngUS6g13S5z+TlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7354659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbaYa0CRA9TVsSAnZWagAArW8P/je2drWDAh+ZDRzw0UJe\nrLc+z1+T4irn8ll9V6v8Dfv/sLqFOXnqHKWnPOw73HbBWbWSd6QekgqeUAIl\nhdtvmOwESewEDYTKbmnQcF2ES8MmzPEDuVYrDzWxWjltKiwg4Wr37P1pREuA\nhoww0ig3gir4mzsR4AOtx1xEVWIxhJY7QoQLluF5n9wPuVFXoYkv+QUC0IFB\n7LF6R92LJiUhAqf/dZfl2aPFOalp8tfeGHAA+EGSxaL6wZ0ajMRFf6YdM4xy\nEtkntmKx/GGuUrLt/hnipQzVY4vHpmwGKHouhBK3lVYdmccIhn5mNp3LVbCn\nD3ZhOnTMEzO2XcsA4P4ayAk2Z1DYEDYd078VjWoCCn1/zV+ujDp7Pti2x13G\nDq2+zxZirrw59JTaLq6xNiBeLF2RkiZRlOdDAtzbtWAGYw1RZy5bOHVpYv7o\nvi10GRTyvuWYQKWf/37cE2F+mwvfNdRSBPSWR52vhsUtrnPmizJWI4LueG/W\n3Eb3yajzt4rm1AXtFkSEqzJOw9oAfFLXJwDv7d3QhAk6kPVx9T9ENvw1q6ia\nOHCZVmWmRXQETygxrUGVb4U0MHaFf3WPAxGqKLHUlLKurfRpN08nCT/9taZ0\nmrvDmChxopQ5LrYcfkxjwOXjw/G8pli3vijaabzPSvHtifg73N+9HcmSjVYf\nVbyD\r\n=yq0c\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"e843bca60bdfdd4a44aa8fe6296b4eec8fe287cd","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","@storybook/addon-info":"^3.3.13","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.22.2_1533642419715_0.5039894606128101","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.22.4":{"name":"rendition","version":"4.22.4","license":"Apache-2.0","_id":"rendition@4.22.4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b532e0efb016cb44009619f9292c79de88f35df8","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.22.4.tgz","fileCount":145,"integrity":"sha512-RIlrKeESJESh3VZ8KZN6aPNC/eixVf7qc7q+0gWr1AexgJtAphFyLdJNNuYbJFFNn4/zdMfb6It+paVFI2+TOg==","signatures":[{"sig":"MEQCIGwVfWXprBuNLQOVNIExPyy+0C3nbos3uldwkRg7u8KPAiBhbiLX5XPXMfKcCDayTXUOrcKmEGOsg/cMesMQGIe6zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7142597,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbbVwGCRA9TVsSAnZWagAAKBYP/i2TjmPqcf/eryyX4gAl\nax8OZPWbXOLkFN5f8pZDNfwm7WU9Jw1pbwpXkhtvOKusVJbeXI/Z1DNwUqDu\njmxO6+CfL0tiWS2zDv7eZi/3M35AH0ZwdOXzhfBpmY+EpLpMFkwGItFSFBaO\nZz/cIddkIq4T9a29vWbC1fB3W7yGiZmQZjFmNBrGZi/BahIvrfyX9v1xmG7Z\ntBToea33Mqho8lkOG+PaX9kwH/8ZeuiYywj9gvYqD8RM7z5gu/4YiTn3g1dB\nu3z4Z/pzF3PeHJxFlP0/U1OQVVqH4Hfr/0yxMgn2dhPvEwSdlwPuJi8+YTGI\nnotoMJuwLjixnrhmJDRQQ86ia0UkoXhlZkSkn/pek/2dbjPX061mQHd0K6sY\nDT6IyNfFbuD1wAMtZl3F3QyNjvaBil3gpTn2rw559afKj4cJmqC6GZp75Urm\nzCiN9hwFu2dp05cdeEffbQOE+p+OL+Vh6+R28/MwrQENVT1xmIW3Fd2ToVsz\nkew2Z4hUxwJy+4whAeItkgrfIJJsi3gPVCSGTfo9FbVQWB6FG3VFTYhrBddy\nTPAyX4vjdrIx/AhpLOMg8Ck6bMI8BYD2IYPBLuWtC/IOLW9n51ua8gA/hb5l\nLtOQIQ9k9LQJ7fHSRsWZgbj5xIxsy1jeZ9YxhFNyqA2RHZJyze7SrrKgbbAp\ngxn1\r\n=5Fhw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"b3f7d91b34bb057aa414b4acfaed54cec0f18f84","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.22.4_1533893637614_0.7784080440798875","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.22.5":{"name":"rendition","version":"4.22.5","license":"Apache-2.0","_id":"rendition@4.22.5","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cff8c80363026171f23369a1eb1fa15cfce56095","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.22.5.tgz","fileCount":145,"integrity":"sha512-e7hjoy4K0BRnmHDacEMiyXE9Jd0EtTEqOz5xxCAVjgbfMDgn5Tr7+ORt1Sw3OPJqF0l2SJeXVnCrV5AA0x2YWw==","signatures":[{"sig":"MEYCIQCOjycxsHeltgEQgYXAmBU1EzQJcg9zq/Hs/m2TODhKAAIhAMwjxo2MxPrs29P1A4EGWZRor5VO5lD1y4UljUFtho03","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7179285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbbWuGCRA9TVsSAnZWagAA+jwP/3/jbMU0H9ZNtsqagPf+\niMJCETu4MzPF/Y+5s5cR2c2WC+sa/DdDzOSheYjcE5DRtUs7mMb+rQwjCLav\nF/NpKw+8PZ8d8lw69Yi8KgRteJ3P2brsYTe7MqCqY1h/flv+IICk0NMC0pBA\nnGQcZTN19L9XsRNpsNrX6qT93g7rRluYbXIbHlv2m+0GRuF5ICnQoKAPh9jh\nMoG1gs0zXXNfTuysy6ymr2uYCKjjNihx6AMpVazHbelqUuYh00z/IlgeLdDS\n2GmWPZD9NH+sE6Nb4dMt53miSlDUAx/5/6pG5lcA5eDMU28vVspQkgM0hsOw\nd+Tx1mqEQcExUluigEZkJUNPoGMolLoEa57iOxqG7sTXeA38EBlob88eKM25\ncjvar5fNGWy/tZMBZjJMog+bR4AEKyAyIdNhO9rNqNklSGJLo6QzXXyifbw+\np1/dfhGStXi5vuuPsu1QJlZ/fafaO2ytFUqm0i4Bwu8eZm6SUrl/F/Z/et/o\nX4ayaUpPg6ws4/xS6vHBwRK+IQ5s0tfjQvaGfjfzKdM8UjEdIlrzMEE6rUpZ\nVeE2wRULZkEHx90C+Yq9kpsvducda2G+PIldVooWVESEuXCoGGL80RvueDFm\nvoJS7aSvAuBkYttoRhX7lYoQlIp/LggaZu9UAfT4BA3wTtp8quJa1fDzq/zG\n/KVc\r\n=4Duy\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"8c9f7a711fdd6a732259835dd8e67b56ba3cc911","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.3","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.22.5_1533897605461_0.2532287114563656","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.22.6":{"name":"rendition","version":"4.22.6","license":"Apache-2.0","_id":"rendition@4.22.6","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"15820dba3a72dd8a9148090cac07bdd9813c0662","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.22.6.tgz","fileCount":145,"integrity":"sha512-Y43mr0D3QA0vDbfO6zTbuE8N8OCY9JPhhPzaWtHyE+cRHuaYkLaCuKsvpbCkxh/vY5wfGXEW5z3xn+HNRDPgig==","signatures":[{"sig":"MEUCIAJg7TLkalw0KgLpAXJo1CPYD+86XNcYMa8wiw7H9aNiAiEAxZi6qG9s8u81dM9G94JJWgOmB7GX6e59Z8hH5maC5II=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7179371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdrxECRA9TVsSAnZWagAAgVQP/iQUcFtkwdv6a99NQq8k\nUkY8DXlPmXH644txfG2PzEJ9Ut5WI/PvGcOmYpdJ233rTi99JdEO2Im9av7p\neEFNmkV2h7fCYvHH9UAwkB7Oamjqa0nt/skPgbzf5ol6sq9oYrj0ljVeCK6Z\nKl9zhKAMcz4H1v8sExG2V67y8TU9Sm9/VqMnMGG6f+oiuu4aJr2yqsL3hNQ1\nwPrqSDmE4sGR2v73yw35qlTh8/dln/1F6DpOIyr8tfl2L1oWr5Hq/rsR7W6a\njO6NdH6TTOw7grl+WNfVd0pffPM/IbGJZrB2lcaNBVc/gS9KDTlIqdGi1xbE\nTSHuKmmy+WsQu8DMXUXjF14wxZQW7BWIOBy0LY7z+IzW0pIWNTn2QbD3AWLs\nCO54BjHvtH33aAcNe2JRGHR5rCAVDIuFbMECey2vIlMLPF2e4Uw0L+poMowo\nQuUqwSoYXny76LriAEz42eB0ScLuTXW9MJMJwwosJC/yfzyzupOLIKMrLEM7\nhOMyYguEvKuwLurpve0CKtsgF7gu7im7L2TM8NGUJtQf77vlYFsRD6E2mNBq\n4JZVVmZA6Zd3saD/gOo+/Rr6WAsQ8DY7MsKe+/+a+vNSurA+RGduwtlRd5B4\nbCbCg4b9n+BpEoWTr2yKTitWtZAyARPA82E3vrKv3+F70a7YoVXXkdofuIax\nmGq2\r\n=EaDQ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"d355309776c37f785153dc041da927195ea89370","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.4","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.22.6_1534508099604_0.9656892318917318","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.23.0-559-conditional-classes-tables-2dab3df":{"name":"rendition","version":"4.23.0-559-conditional-classes-tables-2dab3df","license":"Apache-2.0","_id":"rendition@4.23.0-559-conditional-classes-tables-2dab3df","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"7edbdb672e4e52b8424e785ba295a5284de88e2f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.23.0-559-conditional-classes-tables-2dab3df.tgz","fileCount":22,"integrity":"sha512-Nh2M12X5jmopysylp8ZMMK52UCVQSUEyosBAWGBuebDFnL7knVJ5SyWy9Gd8inXWqr4i+gZGLYX5umONYXi3FA==","signatures":[{"sig":"MEMCHwf5ji5mS0FgOOBrEfduPo1H6k/gaEXGeJO0MmoJu7wCIFig3937+MQmflkNAX5wE5XJk+T1AYwF6ZfZ6yAEP8nt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbev1RCRA9TVsSAnZWagAAYzsP/RH4TQ3LWtyPKhYGhRz7\nbE4W41YXO1vIjz2NjZCVvwYe8T97A7Pm6UXPSglITW9uoTQcJqE8B46x481G\nQDvMBCAfexAkloS2hTPaERbOxvCHgxNEe8Mk5/+y1uh/nC0RBwPWWwRR2iV3\nwrvNEA8SkD4zDH8zZEIjIbbOjhFzchL4MhWFJuP+rnwPGM6w6VN8HLDaSfqj\n396AEOS2yVIZUCS4FjNFRpAS13DOYAyy6gSJINe4V/tQ3UBoZC98LPm4AzPf\nbqLRRLFwKU8f+EPYMVtpQ0Fr11YWxN1/gbLPirICDG+ETXy/FoejbFkSasMD\nX058yxhBWzasDBzm4OHQYKghdIRfFAmEUMJCIvE8BHw6auGfnt9bi5RshzX3\nX56JArQMKY4k8n6mVFG3BNby/R9CRYscIST+8RssW7JlJg3rsc2qqorfZPlv\nRZvxuH61ycQeVu5NCOC3cMPspCC3a0z8yHgFJa/alXE4b1nig/5wkUGKQFru\nb6Amv4LPMZMMbhAABDzLh+e6jZkCiRqvMO3NxeezZj+/LzmapiboLQ+s7eUc\na+98k559sjbAYOKYOMAcSUhL+VvOq4+KExs4fQw79mz+SPQayvDQPsILkDAk\n8ewGScoBqHM+O2alOMMxtroyYKlrDNq4EcNmhOHCKqSeFP5hSBgKSx1tLeZm\nrNP1\r\n=vaDq\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"2dab3df65350528fb1e7c7645114e31e0e91c0f4","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.23.0-559-conditional-classes-tables-2dab3df_1534786895945_0.8020099322763132","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.23.0":{"name":"rendition","version":"4.23.0","license":"Apache-2.0","_id":"rendition@4.23.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1b483a954aa777de11ed2a60e88880dc276f423d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.23.0.tgz","fileCount":145,"integrity":"sha512-TTuG9ONnk0YEY/5wJauzO/ClyYP032HD+D0MnD/PvgKfJHpwt1gs/LzmDMizomZAQHM7fGJOCTuWPgC/BppHrQ==","signatures":[{"sig":"MEUCIQDRCRXEFrfHVQCpxhiU2tAwrZl0wHkoCjmy3Yx27n+jWgIgPgslza/UoB1QKrtY4fUIW7wm+NWyRSj/CNBlnuvkxLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7182449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbewT3CRA9TVsSAnZWagAAITQP/icEtp4lHRMOd5FGcOAM\nQ+bmzi2wSqqy25jt3WD7S+S2W/PEXq5KWuLdxTVfwVQvEzH8mjLIKBV1Y1eo\nICkEZWWAzM9kKGBpVkZ63QPCJE+6nhB+vvsX7SjOo54RbVR5dhUjxvcY6BGV\nxu8DdNWqKfMQvhrkcmkcMtdwWEqFFdDTI6QpxBid1xzR7pbdZvyFDS/jmO8r\ncTRnIr6QJYRIWb/2zLvUup5gHH74AcnyRWj30mMRFJZPcxue+v1FNP4990WE\nC4dax+FL4zyrT4NWgD4Tar7CwaJKQ3wt07K84D/GPnXUCWnAsmsLFZuPUMAU\nVLFjYqulY/l0DV3cBkmnxhd51UN+sIYZfnfe6mvjQBGPTBZu0aTbVAL+4Y0p\n8jFrxnE7H+gPxaJJtssU9yGmsAuD4x/eL+LJA6U1Xm/kzj01DMOLtffmFKkW\nortpOt9GODHa3gbo7zihDeWiGUgUyyAB3KnHQ+rYbXhxZTnl1BmY1o4LpHW7\nmPHU2SaUbQle4gJXuzR27xxQa2JGfy3m35u0YU19f61H1Mvlx+vncT8XvQ0R\np0fiwgjGxmVu8BaihQ5x+/fIhN/F+DNNZeJguyIvn2mOTfsw15GRXfroFGiN\nT676dFr4SkABpDsnkCAK45H081ISj2izofSS2Aq8aHJ/yIvK1untWrxlKqNN\nwSeN\r\n=RYBw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"16db776f32c8bf8e616e2195c68baa6c853780d8","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.4","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.23.0_1534788854861_0.00028307379716552283","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.24.0-560-method-to-clear-selection-b4e8659":{"name":"rendition","version":"4.24.0-560-method-to-clear-selection-b4e8659","license":"Apache-2.0","_id":"rendition@4.24.0-560-method-to-clear-selection-b4e8659","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bcc1c5a4318b33b10eb690913478d389c49ea65d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.24.0-560-method-to-clear-selection-b4e8659.tgz","fileCount":22,"integrity":"sha512-3tDaeWYDTbKUbKoSV80lnZYox7sLaL4Rm93ZuHPdgm38/IeZnsvI7sy0gGXYufCA0XSH3dQ2uf+wU1uFWC0K/Q==","signatures":[{"sig":"MEUCIBSdTKsVFNbAlS7eWHfTr5mmfSONuwDwnXAUX5A4hF3zAiEAzZpqT5FcQqIF/GNU/H2huX1N2YPYjWnh948yHXelYLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":74959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfWa9CRA9TVsSAnZWagAARBoQAIzNN6PEiddPqcWHUxfn\nh8Sye3owmTyFOFfIgGZA0lGqRCGA19JGKTyaNCJI6mzoGjJgl3MzGPx1m9Yv\n+Gq/QMBvKiSIMWVTD83sdywsZZ/QlsulgDRWserYkqrPDtELsIogbEOkLWkp\nwniArlfTd7tZ7tCqmUFdry6/875izHvJkwonV2QkTPzRa27plI6fwEBYYha+\nuijVjdZwwYPSmWcHcM6EXD/xu8wxpNOgsgl4p2IJ6FroBms10hvPq1bjszn/\nxscikmOGR8QsR0hk16wApsuHfs/Rfw/pZMu5KfAiZh5yfQTYBDsBvXd32QsT\nQrJRbzVy+WukSjOw+zVsFhYaXErVDkLlRUjxeFSC6nuFEUXLG3QD1IKk9KqD\nvcppnt5g6obXHtAuQzULp1qlOtwOnoQGzfFJGp4qcmY3+YQMQnytAh/CZdzG\nl/B2qOyCBpff++qSqMA7LH2cPDk3kGpfJSRNoWVZzmpIdiIETcdrHbK1UIX2\n/Azaop6uXxPsAgPchwNtvu32gQXnOHQwdUkckS5qM2Lzmdm8VEJR9bn4xvJJ\ntXgXR5zYwk7ApLJ4MektDBpMuCkSvHtLLGk9aPixQUlBkGv6OcK9ymWC7MpW\nyNlK1i92UJxsFSwS6s7st0/oVUOS/n6DBLR2/AVMq4LP1R+L4mTIEalPQyMw\naWpk\r\n=jQxb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"b4e86599b3193b5de996e8b1c175919a59c10817","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.24.0-560-method-to-clear-selection-b4e8659_1534944956942_0.9080004554728744","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.24.0":{"name":"rendition","version":"4.24.0","license":"Apache-2.0","_id":"rendition@4.24.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"29af80e0cfc56d4393972627948fea9dbb28402f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.24.0.tgz","fileCount":145,"integrity":"sha512-MpJX0YeRWNy5W+F0i9gXPqHmNh+8/28ImBqSNjM04RU3MdhtAtE0+nYgkT2VqbLBWFf6oYute4gHCJarTOx28w==","signatures":[{"sig":"MEUCIQD4W2y7mRPyh2GQUVBUtQQ5Oz8h5l82V0H8TGzcIjj7gwIgOn1Ir+REXf/EnYqJNbwG/5q/CVk/D5Lpzv075ZFZ4OE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7188553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfax+CRA9TVsSAnZWagAAdjgQAIIN5C0aQ6W6wtnRl7v5\n47VoQAYaz7pSjtTwFzHZAn10PAFgZmS4G7zQqhsoAFc0y8r7JoIUIWbGLNKc\nE/vyIcUJ7NMVmXGH/cVco79xrVvS2RLlgERdwivzFyTEbWqNywAnPLGcDGJr\n5PwYGwYSK6PUIjeV6JrMWf0D452iArOg3grsdehd8MMP4ciRG0HEsYZwrE6X\nXWBXWsA+N+lQURRZZTqBLAfVt8Sp/fGuBu4G0nYIF4zHtOaCOEiGR5O2+Rzg\nROBxesOpf1T6Vg9lzszvpm+/LR4X9Ur7gg3AYTQnc35FX+UbPn5YS7KCBHwW\ngy8iRf71v/J8ojff+1vKoAzTU/PMt5AeEkZqeizX6Xh9SWyDl8HI4W1wKzqZ\nZEJNEK14+ZLx8fYOPhLDk2CoAH33UbqYD5Q00CtbFPm9Rp1rsd/AXpXAq1xA\no2lzzjyc6eEC+du96JT5LjmJ55DX+agq8iAfRRzB33Rel0oePIrO8OVGekLx\ndyYyb4x5G8C2fFNHmFQxiCpW8WJ8kxjUSaTNCDbRgnFBjfzLJjQkSDkZG2P5\ne2/Ev8lxSQJIskmg2auLyXLSPHFerumaSK8qXRPhK4AF2IbdVFsGEFrOgLBO\nIQTuRd6V+8Qavj99QmvWMtBDJClcwBKskhVUBDwatTGJPww8s8bYcyn6Wzng\n1nTE\r\n=Vq3M\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"991e6d377cb605b1f4944b88ca4bdea88bc37767","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"5.10.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"6.14.4","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.24.0_1534962813336_0.9262767253569519","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.24.1-539-update-statusUpdating-color-33d6eb8":{"name":"rendition","version":"4.24.1-539-update-statusUpdating-color-33d6eb8","license":"Apache-2.0","_id":"rendition@4.24.1-539-update-statusUpdating-color-33d6eb8","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2920b8c3dd7e0e40585a5fec7d6425dbaf84e183","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.24.1-539-update-statusUpdating-color-33d6eb8.tgz","fileCount":22,"integrity":"sha512-MRA1PYgFg04ULTq95RsXE+p9u+b9EBpwVAZg6D4S+U+fk9wfIUBtJDEgrtxHkYoda3J5wxoP0P9kI7ZZrnjKRg==","signatures":[{"sig":"MEUCIQDT5kS6iP+irpXR37M7UYFs7vzapMUGUMF+/UEFXn/pEwIgeTJi6UghieK6XmGtCX6SsV1Gmf4cqifmW3+nvxR+5rA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhRihCRA9TVsSAnZWagAA7FgQAINLnShAzC0v44UOEmUw\neqliKPo7R2GB27/r2OOSMKHQgKyuAAw1zOA2gT4blEMDHpzk1vUQ99PnohsW\nET52/re/WODxoVbrhSYhXc4sqtPlDgc++4r9cfAZgF5EAMGxE6UeiComdZEA\nhsvmUaFqClLlN8ioRU1jFDx626uxJBSBEOgt2OcacJsOFFzyHgO6DxmWrZFI\nNx6fzHy3nCixOqT4NjvQqZUbuTNJFhBXo+tqt6E7lwed/s42xluix7GEdes4\nJzyahYCq/GD33/8spUtaKK/JUWILO5zyzz7WzxIUkEKrmcspc1ysHyzYgGhQ\nTkmUjv54aBxwUVsaLciPAo3qxFK6yeZ+htk7cTMbmAnOkMKdPKtPr0FAlRrV\n/xLxaBmfMtwW3SIz+T+nbIMunrobdQhGe5FYT8hDA0yIkY6ABBeZtb/+Pp/E\nf0cDAmLWooWHPnn+qa4afekV9TfedL/VgBc0rQnaMX2wHnpVQ/xAQQZxI4xI\nXy4fNgwuYJGZeiqyKgKUisC/g8tJZRDjp5woypZcQd3FUbhN7cEIN19B69gn\nGb0XOY6KImWs/4f2jhaBOTVXqT+Qew38ADj5F4tIUAv3oo6MhZCehW+vVnYk\nFHr8EmPg1JL2bimZNuBB17+5MKpXbupk0QWZVROHWSST327oqzgirbk+VNtA\n2TY4\r\n=urdp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"33d6eb86a62944121c67f56cd541b46b07e1b290","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.24.1-539-update-statusUpdating-color-33d6eb8_1535449248906_0.953022159697509","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.24.1-537-change-progressbar-bg-color-28b917d":{"name":"rendition","version":"4.24.1-537-change-progressbar-bg-color-28b917d","license":"Apache-2.0","_id":"rendition@4.24.1-537-change-progressbar-bg-color-28b917d","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"17d81f5dc58c721893ce69d4f572028823b74653","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.24.1-537-change-progressbar-bg-color-28b917d.tgz","fileCount":22,"integrity":"sha512-Gvlt2xu3/t5nPoTm/eu3d0slBckRd5T86UJluqojByNOH0NfHJwhqQfPGyW70nRxwxxS63su65SemDOWbEydOQ==","signatures":[{"sig":"MEYCIQCF7F9z2iS+G4Z/pG7KmBK9o1wpdHtOLkaBWE4Ueo4eXwIhAPRc+8HWKhWNwgzPjakjCGuOMUdZuct3NR7uh0h4YK78","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhSDyCRA9TVsSAnZWagAAikIP/3bEdghhX84LnoqawKSF\ny+KKTugMRkKh2sTVgWQnIhHMYMcr01vC6gxtIPq06FgPx8k1+9tQzQ9VarJ6\nATSqd3IElLtyTxUIkI1T51NfdWIfxkZRPbJW4AwL4/6EJqlLNpESC4BiZcBA\nsWd+5x1uG7hsC9sYPxtFO4X/CwwRFHgkM3nzFpTK9e/0qofimja24dsoqPFQ\nILo9omCmSSQri8ISjmkZerA3+tD5fquPgAoFsbzpPNLiZX4z+gWfvDWQDx9K\nu7N34TPflPELiS/XWyghyn3C8PK0VzRQL2nWWJx9+RfRErPaGAM+v/GHXrkM\nI5mR9OQ0m/QjvRZ/IOyG+BUdlVgk/Dwnh1+NbSWbulVmpJR5Z3FN8tE3uT2A\nqjIqKNoFfYGJ7seoiUlK18za4Em/idx8V1Gz1xuJubZJnfwu8nPZ300T0Fq6\nb4I50owQ+xsgz4z0JlBt4mp4agPRVMaH8UoFovOezTG/XACVAmog9ML5nUdr\n25qO7SBNdoVnKkOBzb/nSmqPga6ySw12OSTsITSpKMaerggMdodEiPsQENhW\nZyCUSX7fIiEZDIgh/AoyNRyT6H2tgChlhXBjVVNngOK8rvhUTaVBSIVP05MC\nsfWgS0Vmb8rCy8tXFq0+FIvj1X27ipg1GFNqNLmb9imHezM2UeXRf33J8qLX\nI133\r\n=LIAx\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"28b917d0b5117da90dee67ece325e0d93ca830b1","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.24.1-537-change-progressbar-bg-color-28b917d_1535451378397_0.40563192970525264","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.24.1-384-table-right-padding-e7337ba":{"name":"rendition","version":"4.24.1-384-table-right-padding-e7337ba","license":"Apache-2.0","_id":"rendition@4.24.1-384-table-right-padding-e7337ba","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1af77181103c1407cacafaadfb9efe965159e217","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.24.1-384-table-right-padding-e7337ba.tgz","fileCount":22,"integrity":"sha512-ZfvkqEzczutAFFU3H39iQxVxeLQKIODzlrUm3gbNYYVtWXyffi9XBP33Dtf7Zg66EJzLuQ8nMXMaZitcL0oeGw==","signatures":[{"sig":"MEYCIQDUo1k9T0N48zFL9S/aHqVADdhCUIXKhEmZZ4YpvUqOlQIhAKwNJUuyTnjj3lss/j9O5zS62W5nsvZhc04aaj0v8kUv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhTuQCRA9TVsSAnZWagAA/yoP+QCpTIu3VNBfa7FzxHGt\nCAtMNosxs39j5h9sKFHGNpmhL8vvbF7WWF6Du8lLrehhoN+gLSZCB7SgGBfy\nPdeJ+SEm8HPuunz97ZXPHCP5GuBy97muSnZO56Oo/0ssJ09fQJ8tHrVfCJpX\n9oVnwjUE9FgMfWWSq6Jo2SkfsoyK0LUso1XkvSvpK3Q9GbukcXlZ5qudK+Yu\nCjSkRb0m6ijGb38+zgiH7ax7MU1loI9/NhxbfE+7p/usCrhnu/tX8Hcjx/QC\nIVTdEefzZzarkhKp6x2PQgKzJxz4gwQL24dTC0WiZ9OncGhM8sdHlSf0Dxzn\nKzkptzyG4pgwJID+2NBQZIKwmnWb/NMonMrAZBBNxhvyoCZG6k0CtIqGOY4c\nrRvgXUoHqEwFPnmPZTrSE2fdU+7i/b1GbZ5HRGax0kJ3+58wp5edkvdSHV9V\nIL7HacEaasbM/0Ujk/6jCp+8YXNqA50/fZmqo5+0ngPuDlFgvSJiklPSyn83\n8WYPgf5UBPg1bRHYHIo1ISBcyA94i0gMmf1LGaZZ1SDWop2TTTRs/JfTjIsD\nVFGcs4TbF94EfWx3jmsDd2o+Xej/4cQGaWTtJPm+9EoO5ziVbS+JgZAWYq7+\n+ShJMmsroxAwQsh3iROBGC2OFupGgL4tS5Uh8o5ZWo0pMbn2xwnm2SaP7WR8\nAlyc\r\n=V51m\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e7337baa8cb8c4cb14e70cb979edc7f6a3f5ad5d","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.24.1-384-table-right-padding-e7337ba_1535458192181_0.9082587262087451","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.0-573-textarea-autoscale-3ba7dfb":{"name":"rendition","version":"4.25.0-573-textarea-autoscale-3ba7dfb","license":"Apache-2.0","_id":"rendition@4.25.0-573-textarea-autoscale-3ba7dfb","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e842a8cca97b32680248731a6e0e0dee1baae1ee","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.0-573-textarea-autoscale-3ba7dfb.tgz","fileCount":22,"integrity":"sha512-iaKfFiegS9Q//ODFeKm2Ekel6nrWhgLTSSzRN91ttlE3l1okr9UlZQQqVwA+IwMriE/RxZS6wIsqd2sDeuWGRA==","signatures":[{"sig":"MEUCIQDCahozg8HY9ZmDX5SZK1kRW0kVq8iVsgTzlIOyC6aArQIgfB+JjFImXDUZOueZwG3hpUiqAvfWpGHu4slaoggt2fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhYHPCRA9TVsSAnZWagAA218P/jDE/Le9youA/61UHQWl\nrD41CM8G/BKTh7yol3b6G1VRVCQDQYqEQcZ8EnpBaaGgz+kelskBm3FOWkbY\nLN9+S0wgKmz1h8PZt2q2rv+RG+JwD/hW3WAOpVjUnGxNw/c/EdwtFe3k+7zu\nsKfYpGghFaQ2832paJLlKsv/LTlUUdBR1ClZNZgqreWcSzYOn8rWYz8lH9uN\nUOS14/JeTjI3JwpgO6hI5Meka+RPBoYisLyu40xoefaF5BV0KhWP/ymS51kJ\nmgOvMtqs5L10Xnsxl3NES3nIcGujQL7r54m38IDTa5nFc4PviS9jK8QVLyvp\nE9Zuf/ycELPgFaZMyZBhWQ/lXk/tx/Q7YWa3n0Esr4apP68uhUZzLEpyD9p0\nfPYIjpnKnQ67xlchm/9TujsaYAQ7CEdnbOrHa7uQABV+qGFJ6UtAmePM8Byn\nninRnojH39qPhvuEkZ0pWw/tDGlIGeLUIGdD1GgGbw5hpqFFOIbijJj9+HVL\nr7eM5jddhMU/L5EgawhvfGEKQeCXIkAoVzkmF6rm+ygSXp3MOw3mH9yPQTtf\nZTVnYDfB79HuJkbieQwsyUSqlbFcpsWHC4S0z0BBuSlD7J0hkFcX3B9GwBzq\nrjLXSGEQLVEWjF4PD2r2qDBt/72hWxrGMwoJrYYJ6nJK6XfdCWHa5Bj1dI6P\nt/rr\r\n=7yjb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"3ba7dfbdc6ef0f7160a5356cb846b3be2c3f9a1d","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.0-573-textarea-autoscale-3ba7dfb_1535476174618_0.837829469431095","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.24.1-576-button-props-f25fbf6":{"name":"rendition","version":"4.24.1-576-button-props-f25fbf6","license":"Apache-2.0","_id":"rendition@4.24.1-576-button-props-f25fbf6","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bc7f737cb23688d64091dc57e1f2867bd43bef98","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.24.1-576-button-props-f25fbf6.tgz","fileCount":22,"integrity":"sha512-prBILuUEtTgTEHwCE5QEmhUGNxUTgrEfVUehlDo62nv9UKdA/AdseT9gmH2aDY5Gs1CoR4atGlL/a1bVfQgGdw==","signatures":[{"sig":"MEUCIAKCnpRYnXhy34v9k1fTJo5LzwKX0f8DHO1jjepGNa02AiEA7bQlAq/fA/dJiT5xZpyDD9VYs98x2259PTBbxeUhTSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhmrzCRA9TVsSAnZWagAAu7YP/i/KR84qjYAE0Zv4uoI3\n9h+dJoxsIFg9JhA/kH6T5evZ/JwjgT7ajvMJ0mksW4c5QBwtYLj0fmySHmzD\n+3b8qDaeZ3U6jIND8QraQuiUfqFR6WUATp/f6gOrovDTa2yCpNYh9ALju/24\nK3rTBdMcOXL6pAyp6kHr3TwVLt9M7Iu53Di4LUlw3MoDQbj6W1CvAdkY8km7\ncz8/DXUxiSiJiV8Flb3l+fFFVNSqsBf3RQbjIQPJQaqh1wYGt7wDBlAivJzX\nOQIVNx7naKU1f2zoiC9C7jYVpXsL+XG0zmuaIBfGluhRSB0cysUSvcnWlcgz\nuRUNYDYDVMniG6GgYUMbmfnXebRoVn1eKqtjY3whDEdyIQyMUo5F51y07Ja/\nOSHlmtyEwSC051iD6nY+VNyAZktHQWfTH8DYvpyemJkOprvCte3d/ryPmHNX\nz87dc+wzalbYU99TnPnuuKkNIGPY4Qu2ylHWxwj6OIl6QARjlT5HTJGQnLAT\nz5siqALZ0j4fEeedAF+tVoydj1FikND9qso4CSS3kpb3hGV34J+fjOUbCsvl\na7tG5BF+3YwaFaXoAjipMgIagWYME7NX/OzsRlVNaGYqREqbaGJuKupQc7Mr\nJjeG3RHo37eDjZDgzsc0pmaKiae7bZM3FabIWFvLFFsNQXsBJZvUt+HlqMwl\n27oG\r\n=1ozx\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"f25fbf68c1c2c96e998d37a420152240730889de","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.24.1-576-button-props-f25fbf6_1535535859137_0.192585928327625","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.24.1-553-ddbutton-arrow-f42084b":{"name":"rendition","version":"4.24.1-553-ddbutton-arrow-f42084b","license":"Apache-2.0","_id":"rendition@4.24.1-553-ddbutton-arrow-f42084b","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"40e7a2d9529428c4888d1e9d96052eb31236d3ef","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.24.1-553-ddbutton-arrow-f42084b.tgz","fileCount":22,"integrity":"sha512-5EqsZXLK8pDiXADB6kuU9GP5LnjbzLHrAHBRv8ko5ZG+HBCw/RDEIC0Ztsw4o2IjPxnZMtii3M+nKf5CGOkbog==","signatures":[{"sig":"MEUCIH+2XMYOpnPKgio/UOakmWCBTXx9zdyIQF2akLRXemnNAiEAv4ehXjoXe7gHOqusjV8PUFFU3HiBu6P8vSIOPam1lHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhm19CRA9TVsSAnZWagAApI4QAIJB4D0HoH0SIA+itLHM\n6Io3O5tz6F2We7IFQ2Tw43nzru4LYcGTxYZ58UY2vLTgdBazeKLsHfdZ9EHR\nVC0Iq0DfODwA3VEKuQ+dD/ALxuVRgH/O6aBzFSYK42J5dKgADSpiHZK7Wzal\n9v1U+AO6Yy38fmFsd5iyBGg4gvfCdLBkYISEDH0m5l/+AO1j5PJ/5vQZKCYn\nwxxcxg2gktDUY1vULTKujB+DB2O3LnHVW28X8IMIb0pqhWnlUmqBxrLGLyLS\nC8jy4APW7ibQE2x4xvYJRAgylt4FMziHhalxQZnCPPTt8RVC4cOU84FRJ+fw\nHSXFtOFJLCzrKMt3qvWye5C3oDtMUBaSWgR1JUvaXbMZC4cemEVEPw0mCgoW\n/I76c1gpMcq6VbSZQf69kYZYa3CA+C/PUEISufXktDEXhOZkOgpq9ax57rdK\nC3j/ovXracg6o97DZJBtNR8fP/8+DRcOy7c/zEgOdXBHYDi1+UKuvdQmXImf\nfqpDO5C93Th0Ad7fLHRa5BsRfeOeqtEFU8HHGa9Oq+Ws+Yb3bfocDjKnkaM4\ngGb4aqCFLIhJ8pFlFAOxD/oQwhjmJ+H9I6PbYocGputgUCHuxAKSwVtxyUTG\n6juihGUh/A4uZnM1UQhGqTui8lCpokxRCvNaHZCbhpumlVOo0oeL8Eo1oSK1\nYH4+\r\n=RVIn\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"f42084b66842eb0681c0fcb2ed6b11f431efb327","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.24.1-553-ddbutton-arrow-f42084b_1535536508465_0.21434915685894396","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.0":{"name":"rendition","version":"4.25.0","license":"Apache-2.0","_id":"rendition@4.25.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"81517fd9fa86b50f050b9bf7525cadf1f0a9ad8b","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.0.tgz","fileCount":22,"integrity":"sha512-KyX8J8jpNfKAa17HXpnaLStmg1fK6uyw0wReGTM6JD01pWTY4O+bj4HQCkyOQAH59A492taTta1mS2YdbfMvDA==","signatures":[{"sig":"MEUCIQCiW1LWGQNUHjl2EbuZ4ZbKd6WvnwiJhX1fkwKyvzddOwIgL5nbIoANhpsZW4K3HfNsfBy1t5hfZlIpGXdW4vHqvXc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhoA1CRA9TVsSAnZWagAAc60P/iNhBOpNPLg6KZ5/7g0P\nj39GZe0ESdRbbHtDai63GZi8d5lw31VGZy+OaB1LuABoZXK4Hg2oEq7QVI30\nGxM9Rx/wMBKl7CtvWZEQafqdtP+nV70YgGmHlGwKEjWNqiPLozk/L7+tRwIN\n9CnitfQHiwmyrJY9YSa1kKYhoPVeRDeuIZ7d6gSTQWQsTHfOxmEHLabXOUsE\nkPeFX9oxHfl5WyXvjOWUTsRa/Q3NS2V05zf4bQ9ym3hBmGnUxxiasYN53HSy\nP9NHxEYw/Wy1ko99IKU6Fb0mIWAtlO/CZWfbR3+6e8+Srx2Os4XpUWj5xovb\n5+HcvSlKLtVtFKgzgWRBeLQVBku5h/wbDm5+kzGRMNUF0WNHiEXDKn/h19zm\nzyEXo9FNaaGG04ahccn0HoV69Qvu3k7Tbf4DUlU+zOgOCSQlIIwONPfXL2Gu\nqEoGhpez5h6OarHXIPPptwqt2qJG24x2Mf8/wH7Uke1ChH3pJmLkfGQqxs/r\nz2N51ur9fOBZo82vuoLZRdXheDjKF8ytqBzUyak/AWVdkxjxvniBUXMJfiFK\nwArcGNwVjrr4ZKR6xN9axRrXnXdKqej73yOhZkS78+yrwPkeyz/llRKx6EzX\n/jvra/2A8EfL2Q/ckQOTs7AC27gW/oxyc7u01CDD91NW+fIbvechOm4e31DZ\nzplO\r\n=gSNa\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"4669797f7c59646ed8234d947f8ee9e4b3379dbd","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.0_1535541300724_0.7631648575790753","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.1-576-button-props-dea798c":{"name":"rendition","version":"4.25.1-576-button-props-dea798c","license":"Apache-2.0","_id":"rendition@4.25.1-576-button-props-dea798c","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d5a7420aa51503ec9628c0e32ef316a2691f06e8","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.1-576-button-props-dea798c.tgz","fileCount":22,"integrity":"sha512-3pTJQDBR1ixFX22e+R/meJ/SZnkt7VIFB2AUAHE/vubAdflpIpIUXvHEpcv8ay3yQrQvSqcXxYC7RlxcL+SkUA==","signatures":[{"sig":"MEQCIAM5n82C3vilXNVkSt7Rdgfp1woZxQQ8lz7wYFaHehV+AiAEFYM1P9SN1saoKM+Ev/h0Qq/BBLfMi9UpqtQ5r/8ENA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhqQhCRA9TVsSAnZWagAAoUUP/Ahqmkhf3ie6bzDRi9AW\ng6T800L+RZMYzgTgI7zXIxuVJGvXtGJ1+nGGMSH94quafB6I5ei1JQwR+xmM\nvcjgoGsqlAjpaAh/Zh3TZzM7N4Vzo/YZE3biWOwD/6WSrEtKxZ6ecMR5+7YZ\nN12sUTHTnOlaIOfEG8d38rxw6aV4U+4rKlPTBvNaLik1SUJ2CdYrgEPEla48\naSrdtRhlIwhW6a3+Xu84AVDEaTDnqYepynb3eqHLInRTpiWBJxB/flAj3B8h\nJlU0geCO89oRckVf9CuPMeFH0qHI/TcncjGC3zlHgBLfwA7EjjkM9PIgqSWU\n6hnwLkxJM3a8sAJLRSpXJ3kqQNfc/4E2d29wd85XxWD8u2IFzx/hHTe3uvuD\njQ3UvM5B9YrhVN+Hi9WTxrYO6yelOWQ9jLYCMkc4GXGSSYEG1w1FB/wWKLh/\n1rL/5MsapoY1Wx7/LDxC8qSeDilxdTM43fr+Gaif+c1FNdNu5F406Wfm1TRU\nLBgMD2BGbwDNXEroUWJwznpk0TxtO5NfeqGkXV9a2YMULPx5MzeogdZ6IdGh\nebXGUbbGMjP7RvZWrfNP0/f4sGeW12FpfoCxqOXhfCatrpPCOhC3njoSC9WH\nWks7JYuRMT3LUzr9wgCT5rIAJMsv1SI7TvzFDJfEhihsR5+G0khjJTiviYff\nqZLp\r\n=rGHT\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"dea798c9381462c399db22a44a4d1a7a0ee5b9e8","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.1-576-button-props-dea798c_1535550497248_0.9030998611892211","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.1":{"name":"rendition","version":"4.25.1","license":"Apache-2.0","_id":"rendition@4.25.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"888c3e712d222b24d27be868b756d0a691b7c3a3","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.1.tgz","fileCount":22,"integrity":"sha512-Uc5MW1VJ9S865KCtVtBJ7iRiSsZM5Mx8V1VXxLuyAAeomjALK1mdoOK55YCwApu2OmBjxo/tfpK8y3HBiRue4g==","signatures":[{"sig":"MEUCIQC9pBQNKHQdaiBx2zqNt4RJc2vnnr6rp5LGM6L/RmzKcAIgUyqHmNjMuANg8O/S2gUkQM1HwMzN6/gotZXAyx9J9WY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":75394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhr7/CRA9TVsSAnZWagAAYUoP/3TfvzF7GokzlCVVEcEP\nFCsp+P/mVr1TgOmOxFgqeRkgJm28MGv/fTp0f/obV01boqQBuHKabJ31xzoy\nZBMWNgmPhtQH9hzIQuo6dIGTgqb7o60lMJ7euTjk1W6IlpnJHeCu1hT0RYEO\ns7AZZRV4g/XVzn/YSKXWONUvJ1VaqO1766xmHFnZTqWN3a4mxpTryXPDPAFk\nMAbwP1FZ/3uKeXie8j6FidgfIVuAbOYgcBlmKOkArEuB2gjl9pTVEeA7DW34\n4yfrhOWJXMDQJTJyCEEbAX8LkXRIJ6LL1dHqBSB0shGGj6FabtcTZ2UPzhDY\n/By6K1VfKCHZQHXuJ/YDeqbOVJTAJ3WWXGqX4zFwIe3VcZARH+u4lxc2tPWo\nzAsRLxYMh7RQs9DpHE1mXyJVRXPSCWXGD2lR57qwX98KrgZtWIDRccqMha4H\nVvaQjiMdwYHFqaXh+Fmrz3dNSk34KUS5AozQXNxGsZIuhCsQWNXuuwaWXM0m\nI+tbzmhkHRi8tZZEsr4ALMKsCy+RA8lzJ8RFW4GjbKdxfuBpdZEPJIHpiJ1u\n7NSGtfVZCZ3a/aHkzKFPYBhzLvnG+bpSuOAzNuqqfGki6Xu+/TTqIXsHWZ6G\nGfwaPuHDHuld1h5EP40zy6nhDw7rTG/QlLr/TEANrN2As89GFNhF8gI43n1r\nSZSX\r\n=QdXf\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"c0b8fdd2f9fb583ad0e6eb69cdb8473db431eca3","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.1_1535557374715_0.582457552735806","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.2-prepublish-00009d0c788b8999a1618d5f159d9b328c874da2":{"name":"rendition","version":"4.25.2-prepublish-00009d0c788b8999a1618d5f159d9b328c874da2","license":"Apache-2.0","_id":"rendition@4.25.2-prepublish-00009d0c788b8999a1618d5f159d9b328c874da2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b4c6f04eb6e24bc996d600b8bc3e04543644efda","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.2-prepublish-00009d0c788b8999a1618d5f159d9b328c874da2.tgz","fileCount":126,"integrity":"sha512-FOQ9mP0jhiFd2Mr/DGLVi7rViey/ay4cFVHJmrQ8Vg97B/C7eK71uEyVYpH7RLvdVL2HxNxDyOuuVisK1jXWbQ==","signatures":[{"sig":"MEUCICuOJN4qcrcUDKKQz0uxzVl3albKsouxz5cKcHvaipJjAiEA1SHJuGm0LQBvBopyYqhxoD9zuum9zVX+hv+9TSmxQWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhuUICRA9TVsSAnZWagAAzewQAJ/hAdwVd6LEwxnOxMIH\npOGb5/Bcif+aCWwL3bGsPM6kWtspeejt6akC7ynkKs7YAxo6Rw6+dy1COd3F\niz8loOZd9Fq1nisRoqQBJ6uGK/huJddodsUTglZJ7XF8HhKh3a1L+d4FVeSz\ngjQYsq6pz7EubSMaGAr2qtZzzqS0gS0gBgCbAEliBJsK+qVoCIGtX79L0Qj+\nUdcofDImLC4XgrgZnMlFEPAZYxix1PT/zHHFG4cTjLfiJl1K66Obz3ZxFkPd\nAAhX1cB47FhzrUC3eSGosZzRyBLf56q9zdtPeaYoTN7neff6XvJ5F147U0c4\n5b8fKZvWObqiCsDyUpilXScIx7NThXlAc0kNu2QydxR7eM4/fJLlXL939nfo\njdZ1unzyQGG7spxViSmeBbHFsDNEPTx8xAOw3niGthD0V8bSMHcWP/9cA3cS\nECmQHO8R1GnTKLHcGA57RFeKN/P6aPpKHoOiln+5gfeBp74FbtCC1YdgQM8c\nUzCyvi+74SkYY8QqRZU60het/pfAeyt3IojO8gDr0u5Unc8BZqRNJ+VU9AgJ\nYvUylmZ+/njHx9++2np/LyXSLzm3kSDLQJKrBGLP9dnUSoetVz/KhT1P1+rh\n7T5LgenXBw42iOrqXQ57gi6JdTi0SKWycZqdq7NTFSWCgKQH8yPA9QnydaoD\ngQ5t\r\n=1Rr5\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"00009d0c788b8999a1618d5f159d9b328c874da2","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.2-prepublish-00009d0c788b8999a1618d5f159d9b328c874da2_1535567111776_0.24737765190286254","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.2":{"name":"rendition","version":"4.25.2","license":"Apache-2.0","_id":"rendition@4.25.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d6378b8fd3b1cbbed552b79098a04bb3c224c269","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.2.tgz","fileCount":126,"integrity":"sha512-2i5GGOTQrwiBpgkCSo8WuBGX5kyIlq47nvQpqfeER5nDfCPHohCsEykwamrA89Gs2tKiE2eJSPbsLxQkDoL3oA==","signatures":[{"sig":"MEQCIEUI/622Q2xEnUVa5ucHd/tVYKXB/VZbZqyNQew66+BXAiBzO+xmVm+cXjoWEQhJvD/0AtPq0lmpYXanEHEQweDw2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhu4eCRA9TVsSAnZWagAAy9MP/jWxL4MCWh+CRFXYz1Iu\npwfVmJE11qX6UwqVRe32M70ZXcBnsbaSCbVn9twLioXilVxxTetB1PById8m\neS4fIx5kydAtSJynnA8PXJob09bgL+mknBC4/8f9ioYLSCCbiYMRnK/jprRe\nKntaYQ/f2YPq/ROlEAjvKIsuMmA55B9mn3XkgLNb1zsXA0N+RhVB9argg2OV\nvOT0a8J1kaMwEA6Xe/U/eLJHp1rEDf5ufjVxxfD/RY1Jt8G9JSoDYYrcjT+K\nx8VRN02WEkbR9e7/F0n/EJfJknPEVuKzrWBF6oJn5R4fywdrt2rHMXgaJLpL\nQWl4AYKQ+YWfd5s2hid5FD2xvZbo/Ap06dXgPq1lOyemE14fTDBCsgqcqFQU\n5obKYFBc6sH8636i4aS17MQT11GtX7u2TUxbEO2s0v5ZVqP1iLUibkuaZLpD\nu5+avmvQ4jYUtaGr60T1wGEk4NOxKP49Sm5uQRRLf8V1mpCzye1nvXXYrb28\nEpNM+rQm+2rBOL/05cL7E/LA1xsPTuBnlGc55us7SoQnjsudbPL6AZq1yT0q\nJwoAeQtCH9laceehY/TeDHxfuqBhvY54W0cpqj9oqK5M8jqeTSGku5/+TxNJ\nuPjQ+Oc3FpmegI6SIYNORIIu7ydJNzrhaojrtR5sNZclB8RF/nPA3wjzGlhH\noOM+\r\n=Vu9a\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"7355233453e5b0184e564ba9a1763ae3740ab2e8","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.2_1535569438221_0.17584857311741886","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.3-553-ddbutton-arrow-2e87ec5ec62eb1e562bb89b1f3dae54e23c68ce4":{"name":"rendition","version":"4.25.3-553-ddbutton-arrow-2e87ec5ec62eb1e562bb89b1f3dae54e23c68ce4","license":"Apache-2.0","_id":"rendition@4.25.3-553-ddbutton-arrow-2e87ec5ec62eb1e562bb89b1f3dae54e23c68ce4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8cedb212281169bdeaca5ecb57295dbddde4b82a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.3-553-ddbutton-arrow-2e87ec5ec62eb1e562bb89b1f3dae54e23c68ce4.tgz","fileCount":126,"integrity":"sha512-ua6yIlt6UuwDnHnqygcMi97a+He9I1K+RVzYT9yuAWpsx/VS0izqd580p2omq37Hmw+zlQhW6N80JRTBZDAqLw==","signatures":[{"sig":"MEUCIBREiJKWVRGoMkza9cD2DT0eQipRgYBm+5vqwm1+EkINAiEApfcztl8bOretveWZ8voKX/uImleTrIATeR0wCvpwuPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh7w3CRA9TVsSAnZWagAAHk4QAIyVVBooCNKN8ktDKzVQ\nz8orUPlc4fOMEcRdh8z/t8fioj7hC7pcrQa1O492nNZhUPo7o3UbGVQZZ+MN\nk0bY0oE6McLSicw5avUTHIyx0zXF5cQX9kJoQMA1rxlfE/rgOOkO3v2NXM+J\n73DIE86A5AmYVjq4/rNm1RxHXIwR8CmufZybUx40b0kE524aonVAYs3bQbqL\nNLXfZD70Lr+ss6ZwTRJ7eHqUrB621TkGqybrIkVQuYq1l3K2eMEb6jeUOx8i\ndgY8jnPW1mKqZBK2UZMmDkWZQXQG6aQd5qHhqfT50h/wSz5QT/v+tyM7i0x7\noxa9O4xHYXOAPZHGUeXnV9PvAM9TLvlVdSH7jpezoCIEidweM4vAyV79AuLk\n1TLLrIjX1WzqBR33j4aeMqeBYf5D980iWTlAaCwBOwZW+aZISh4Pdsc6WAwl\nPT0CCUZqtzCTPHbjMsknv0tE29Kh8BokLIsAc0CnI5go7GAS1S1slUTpl2Fa\novj+tiuQRzNjXt4GINSYYsqoq89Y4aImdBYIHNHhkFNPx/d1eas0QQNZzquc\nA2T/NLYskALWtR1L/FDKmgcmaQNv9Tt4T9Yg82c3Z6Rom+gi0MpzZfVLQGtY\nC6T53uI9DTxzXGvKDsyeKWsRmCAkZFYgsNGT3AMo/HKtzNZkhQPoSd2ipvgC\ng2ne\r\n=PXLz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"2e87ec5ec62eb1e562bb89b1f3dae54e23c68ce4","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.3-553-ddbutton-arrow-2e87ec5ec62eb1e562bb89b1f3dae54e23c68ce4_1535622199185_0.3195948303286109","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.3-537-change-progressbar-bg-color-c95ba3483398b476801c8275431c519bd3d64fed":{"name":"rendition","version":"4.25.3-537-change-progressbar-bg-color-c95ba3483398b476801c8275431c519bd3d64fed","license":"Apache-2.0","_id":"rendition@4.25.3-537-change-progressbar-bg-color-c95ba3483398b476801c8275431c519bd3d64fed","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ff8fa22408d0ddd93228cdd44cc64c195ea4a803","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.3-537-change-progressbar-bg-color-c95ba3483398b476801c8275431c519bd3d64fed.tgz","fileCount":126,"integrity":"sha512-yXUgNLxNEpne7SwsqDhAiCsmvUAlyPOM0pJ33jpDcEYk6KYjyMO6jwbT/MbdMqpYy5e4mokQ4AzHB2Bnd39WuQ==","signatures":[{"sig":"MEUCIC4ufR5TRUBi7cS4gRBFsUbVIS7WICm+nGcWpzl8+x3dAiEA+fl0a3Kz6/Jo2hB0zKFBAt9YoEjdCDkHm+pGSkLOpVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh9sVCRA9TVsSAnZWagAA298P/1meyldi+WbYuHvUcQ/m\nm1ASA2wL0JaJv7Lpxmn8mNs3o95q+JRrjraRoKvKhYc2PEYeYvesDqEHTQlH\nTav2Dh0asIWliwSSFVBfXQijlfPiy2X/ODAIgFB7YQXWSCeuqpIB7lI4v9Q3\nWaxV4k0I5D5vYymXm4sVy8LrgaQpwD0cfZOh+wHQu1rgkWtIsEbicpdRIA9J\npdWyzje2ImAvlf8ZI9KMEjFmgBxhF0LNs63lmITcvd/AzTiRXovxJbHWzQI4\nEEqyM1Kuuw1wWCxzIGni3W1rmT2Emkcjpae1172OOVKGdjD7P/FkBUYdA1Z9\nQY/nO1yrmmuFu2MViaD4tHmrOgZiIxh5hNVeO7xN/OsGJiYo1GsW/Js4E0tb\nkNbWG21KM4B8mb7rGn1W0I1P+0TOXg1R1kjwxe+LmNAQ9ojrt787UMqvol4d\nhTH2hPQR0wgDMvVe6rBrPmSfyN0Sr3ixRHYOxbJSFlBIr6Q/BzyEZO0DcQTw\ntvJR6yGClG7e504g7tIj6YeMyPVg25j8dKzcrzedFVrNfCRul0AMiaxE44Vi\nZEusStYLz8Xhp+PuxfL7fIb8iU0f5KVpGGsfLJeAOuUwLSMh8ol4hVPIOr8N\nutVCPqEEXKwW+WR3muufPCG+HROa2ZNGKYuK1CU+m7fdS0dZLSoI3vifJjcn\n6XHB\r\n=7ftH\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"c95ba3483398b476801c8275431c519bd3d64fed","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.3-537-change-progressbar-bg-color-c95ba3483398b476801c8275431c519bd3d64fed_1535630101339_0.4567519943360192","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.3-539-update-statusUpdating-color-9c7139c202ad1cde6e7955d12dfcce1319a7b70e":{"name":"rendition","version":"4.25.3-539-update-statusUpdating-color-9c7139c202ad1cde6e7955d12dfcce1319a7b70e","license":"Apache-2.0","_id":"rendition@4.25.3-539-update-statusUpdating-color-9c7139c202ad1cde6e7955d12dfcce1319a7b70e","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5b9c6908445616ec7ad8a36b122167761f955d97","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.3-539-update-statusUpdating-color-9c7139c202ad1cde6e7955d12dfcce1319a7b70e.tgz","fileCount":126,"integrity":"sha512-GL14tfYd8CLlweMq8U0Aa5HCwOHKdR8M/c0RakB+ZuhGIZ5SyR0tgBXjHa/I3iobNwXRnxOYiRuzrvvcJ7eVMw==","signatures":[{"sig":"MEYCIQCKd6yFQ1zvsMU+U/EZ2NNmhIQ43BPsbtvWdgAT9xDm+AIhAO/zDl4v1swXc+XF/5roQuOElVstloc2BGCfEs8FaMKC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh9tOCRA9TVsSAnZWagAA8BwP/jpuxT3fV4lwzm21lnrN\nHYpsijbgWPjbYqhWGlLOLdOSut05zPhSNazlOgDiCIMUWqBLpiuwfJ7ZqJGY\n61q1861jhr4lvtYcOdoi7PONtGMVJnmjSZyYUqHk22z556FboCLkMqSvuRy+\nXGuIClfh3S+r9vQLE9zZiH2Gwujn2boZR2kNHHLYP58syh7SOyD0xCFn1LMY\nPtXjZNLvUcCwrxzsuHbqQM1x3Z8UKpYYoLop+dMNEVrNFB26zxYIWYFTaLt/\nA+HojaGu0aXDBLAyDnFH0ddiz93ZCC34rGtTlH99Tg+VBIjLIIj0fiiTb2el\nXUK5bz6HByClhMaOen4nJCW/RrE+DfA/4OqjW406GzeACkjDOYEVGPZn7ZvC\nAoHYbB0Bz4LvQqt+Blf+Q8Fov4TBpy9/a58S6o7Q6+9SZjIQStwIBLOHimYe\nlBKmEDrZO37UmiWUq51Ia96fi8A4eNsyqSSeizLFKU+egxlLVY0aDlKMTIqG\nowFEym+wggQuLGOEqTWbppPfmJ9IQ0vYcIe2QwDpoYSvBReS3fOOHG51QUq2\nAOs+9HEZmk5U7AzCytvO+EkITTiCdU12sLjiJZrE5VKCNk8W6nG64Q93/jJc\nC9AS1o1ppLBwpPVNMW+SNQFHEvoypEmBS/155b3x5XfUQgjBa2Yt5ywbGRiz\nzEkX\r\n=9bZP\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"9c7139c202ad1cde6e7955d12dfcce1319a7b70e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.3-539-update-statusUpdating-color-9c7139c202ad1cde6e7955d12dfcce1319a7b70e_1535630157494_0.8304423057150163","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.3":{"name":"rendition","version":"4.25.3","license":"Apache-2.0","_id":"rendition@4.25.3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6017688834c31c71bf0a808e507c45ad9824fc8f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.3.tgz","fileCount":126,"integrity":"sha512-KJt+7VWHcCS5WZI0SeXNHqYvEjmzA5TCw1/CZHquUwRuo5k2WBnehu+cXD3p9OUWCDOwqxrrVVLeYSBuYjLqLQ==","signatures":[{"sig":"MEYCIQDKvUkjYt8ORicE3mRh7ms+jymb+VciyQsG3j0sjz89cgIhAK8qbCz+lBhM/d0BvRCPtxMeMfjX50j/zsV7UJoYTzut","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiRUuCRA9TVsSAnZWagAA9+cQAIvxN7Ypxx1Gv1HGpUCw\nU2ZTnV7AFuLqBhxZMotLC/5V6ECQ7boA7LAEqpxCQfGrZNJI5jLgFgbsK3UE\nqWLkdtN18zSIIAVMqhdT8DbbG6ka04q5fsaU/fl8e064ENR4MAKzoVKj/Tu6\n+9YEHicJzCmiem92UqIkxc97fb+/d5V+miJaJcCoV6W8Ic5qtCdFCRp5ATKq\nHvwKK9Dq8q4eUkT90+FTR21AwjVCcYecBY0cLAMN5Sm7dehSqweYnCicAovM\nVYKu5B94Dypj2bE4CyiFHf3dZlt8z9EuL3Wis85OsL5Gzni4asNDx/Yvsdsn\nCGjSmnuThsKF5Hm5mEOielqHFaAQasLaT9U9LxDJNYkXlGbhxSg5TwIgoh+4\n1mBow+am8DePZqZytsOUJmZWZ5wFZPlHsa01NF0zQqYFvJ2ZQOzR9hfqhnLL\nrX9H3SZffqTQUUEWJyeWEo5A29KcQjnQ/hCBYXjaki4KD1VxUhCIXRCcyZ6V\nufjIYZDsRARo/Zq51W5KzG+d42YTbJ+XZNP5Kxi/CoQoT720jV+0FvgmXa4O\nNProT3VVFdGtamtxIwwuAS5NZ7f6Oaxj/xx6Y7XgTQTbdvmuN5NUmXnEuZ4o\nAWkbNl1pb/UMOnWB/eiqzs6cNevQzxuIdSBKXA0qlqBY7oX4ykq8p16uEENT\nWipj\r\n=yQec\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"83ed62bcf47a3ac795a5f319566639c70df661d1","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.3_1535710509305_0.5837101844441157","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.4-553-ddbutton-arrow-e3f293653030262d5533edda10fad22fd87b3723":{"name":"rendition","version":"4.25.4-553-ddbutton-arrow-e3f293653030262d5533edda10fad22fd87b3723","license":"Apache-2.0","_id":"rendition@4.25.4-553-ddbutton-arrow-e3f293653030262d5533edda10fad22fd87b3723","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d7134a817e1c06f906bfccdbd47cce7f8c50c0ad","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.4-553-ddbutton-arrow-e3f293653030262d5533edda10fad22fd87b3723.tgz","fileCount":126,"integrity":"sha512-5s/59LIX0TVoQDSha2V1MI/7DTH6altD4GiJML7OjfMMD7A3f2oQKHor9DrcGB14WrJG1Nnm/7OMBdzyBJZsiw==","signatures":[{"sig":"MEQCIBlFBBFOsIaQGnv+vATxGLRT6RdPBy/9gct9KED9CkPjAiB05s34qTKgFhtF7r3bgDU+YiMBLp1ml14CFWBYSC5Pbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiZTlCRA9TVsSAnZWagAAHPQQAJWCDTc/RCYLqHA7ErnX\ngb+rutumTMGesEX4L91Xgvk/1/EpcnxFSxCIbFV8TmbJomeL+7EX2H/SwCYq\nMawIKjAKHyv8mzSJEZux+UQ0NkuS//txZXiluPP/5arr7UKYq4LTpbLdk/ar\ncW2aUfyFC4vynVtHgArJj3AVgcifmeKG2tLtlFBTMQFxawego8xK0XEiuAsM\n/0DXo3Zql4iNab/pLaR1Viep6OtQOl+0iJYIdMIt/wJmrZRwSTA794udkhQF\nfWjfOWmIN6qJu4HkRpb3PcKQB7uAQwD8aF+q5/ao5jfEqx0Mjuri3o3fX8A0\nYjCNSk83PxH/12wtvAMk5PYcUtCwEgdzmRwP6yHVljNsbZhMu6OJri5t5Dsc\nEuvf8PCATZadljYproyjjzSLOxriWWC8x2K5jDCvcPsKUUsngkWg3VFmG1Zu\n9MMwDruVaos7/i0Mx0kzdAXOnMPMKBQQPAdyznZpTyETX03t0NdeXRdbFFeQ\nDUKGq2YHlLkq+XFGX6eaHiz27XbOvALN11xMgHnmhx3OR2364QKv5PNGaF6j\nQy/o5MUAHpzMT4GgfT4hIxn9pVPGAbV5yxULv2stFx+rw0M9e0B3ZLl5SAJA\nh/oXI8esA3WsG/cIe/Lkmsf6yVXPVdl9td9gMLMgDp3lWeXTiA5yaA4W4vGu\nfl4l\r\n=QGSi\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e3f293653030262d5533edda10fad22fd87b3723","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.4-553-ddbutton-arrow-e3f293653030262d5533edda10fad22fd87b3723_1535743204928_0.08449936547852932","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.4":{"name":"rendition","version":"4.25.4","license":"Apache-2.0","_id":"rendition@4.25.4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"599e3bbf32397d7f866a13b578bd30059af71b8f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.4.tgz","fileCount":126,"integrity":"sha512-UDv+JIL+onpAYkEb0ILUADCD0bJPFng8e3Ned7mR3lNw3g3xs57gLOWparV5JdA5fhxDLkEHnfI51M0YFfLtbg==","signatures":[{"sig":"MEQCIAS455RKNDPo4sRWUCqVsmu33Ea3wSbG0kXVz4Z/6ashAiAJruedXqQZ25vLByiZZbU0ImPL3dh1OFV/qZPful4pNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiak8CRA9TVsSAnZWagAAAVcP/RaqLeohsueY5pcHCGpC\nd1O/n2SpxW0ilZ6Q9yJhX88alRuASZWdk2MKoeav2qGx8zKFik9jPxdaFUR1\nZ7D30Dm+gh2a6hjTExfFtCYz/9JDW9IeZqDYXWD4jwL79DMOh/8DN5MweASd\ndw6eCQFx+JwYRgey4Ovv1YWSsZq6qWF7s333KdVtHcclQyqVss/gfMiAo3U5\nFgWkRsNm9gGhPR4A3N0R05+WM+SQQGNJsuHLd1OIwWNggddcfTYpQnsGGiMX\nwVROKIdx6oHPnbmlwKtY3Zn40tHN3QLxhZC/dS7yGYvK8bQ2yWFL4YEBM0CY\nxPe/fRLIxcVGTQnlz0ljxx7MFxFchqUNOyNbr1gjirINFsPYOGEed1GICpZx\nDzk8bZ6VtTxLzt4sX+C2PVqrnJYvJzcc4iICVbAsG4hnI5WqNFRSsXmE4giu\ndTQs+89p6iPBVPXolfLNFdR3lyyHStNjKIpxSW+rOxOzl5yADWDalUpgtlJd\nnzG2NdyffVQzH/Th4AlGfqax/9nH+87d/UWp9gfZ92KDNFCSz85f6DE8BhE8\nQf9MNvgLVgQ2SOPJYr0NCvEt55eWkuO0TQEg1EdTpqNcbxj2t96Hel5Ag2yS\nfacSSCQdC/vz3jGhDV0dckQmtngW1gjaM4IjBxxdg27v/0R+oCT3LAGLm7Rq\nlo9t\r\n=bTWK\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"b3cfba755dba7bfbdec479c35fb29f5e9435944e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.4_1535748412052_0.28555691802833927","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.5-537-change-progressbar-bg-color-3e97b31ce682228779650de2166a03cd755a52bc":{"name":"rendition","version":"4.25.5-537-change-progressbar-bg-color-3e97b31ce682228779650de2166a03cd755a52bc","license":"Apache-2.0","_id":"rendition@4.25.5-537-change-progressbar-bg-color-3e97b31ce682228779650de2166a03cd755a52bc","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"f9642fe78bceb12e919eb1b8ab30367eff611066","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.5-537-change-progressbar-bg-color-3e97b31ce682228779650de2166a03cd755a52bc.tgz","fileCount":126,"integrity":"sha512-6uB9k4Gw8aHuvDlsRIwOgV1gmfH9zQTm1qpobR/LPNTrxiNnx6LyrKHPgikAqSYsp6Dh2U01TxI8NVi5gdlpLg==","signatures":[{"sig":"MEQCIAviP2/SkF6GoV7YRFp4q+qCUTUdpBYZcxTM4SK4qayXAiAjGzayJprbnwUuVOQbMG08UDbZ6gMbeshDVsEaSIOAWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiatjCRA9TVsSAnZWagAA4DEP/1JGmqS/oFZKmKNJZ8MR\nJ7vx32/pEsy+RebNRcpaWfERiShFwrmR24h4wgHV81vq4QVWgmg++BSwZ/6+\nUuBK6hMsWXXaU6q5TVnqiZKIb3SrGaHTDeMu4Ipo3CjhvWwjPDqFlU5/Nmah\n2Z9WQxaJWO9+d5tj/vid7TOHwdRcvF5tcyChPABo5+dLV93mYxtBCM/eseWL\nalnNpQyB4hwi2uRmjriUttHWtjfX4zaiBo4ZlXwYJMbKkl8S36feHjoXau85\nAI9ojIVA6JRbDLMBkXFmfELGCq7udvAQhJ2Lh8tusT9WcvWgcX4bjrKpnU1W\noybRcLU3XFDJQvlYvAZDE9nR6c7noaN7PZHPGkQUqBuFAcSRuvzgl39qKVJ8\nb45wnRCadHI0aUScYBn0jPcGawf3i/tgDMtsUsPk8LVIYpRmloTlrIV2uvCM\nY04YVkzDpfBmTnOB6tclrj51iamE9xhHynK5MWortpDs53nJSjHh4lA8TPi5\n5I5J/m8N6HpHE1SwGy5wu+yWevKC0X3eGdpjQqndgJLfRiIAKoaMGtj+dGdJ\nO7MPsR4zVq1cX1pMoY6q3BRcD9QmzXbzB+IzdMFiOjGXfwGexZyOsU2uTZrt\nuhzLb/n2S7aSHeGZn1y7EPeUkF1aIwl6Jr8/q+76FqVlI0jk6v/XkQ8S9Jfb\n9f3S\r\n=uusk\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"3e97b31ce682228779650de2166a03cd755a52bc","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.5-537-change-progressbar-bg-color-3e97b31ce682228779650de2166a03cd755a52bc_1535748962345_0.7875194279803588","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.25.5":{"name":"rendition","version":"4.25.5","license":"Apache-2.0","_id":"rendition@4.25.5","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e675e2ab42827c173d481f5a2ddc73850ceb27aa","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.25.5.tgz","fileCount":126,"integrity":"sha512-i0i3HFgL3WamHSUT8b/QPQPl7BkUtxhq6T5vpMzrHJWYkTrg3pRFPUZ64CEHCbNIXQAE+kBcMQTn+kuXeHoH8Q==","signatures":[{"sig":"MEQCICFoD/9c3u+RfziEf4fktR4NOW0vdtEOr5Cxu0+kw+APAiAGBEgpzbQYzaGJOz51MB3ntoFICCgnzQelCpcJf3/zQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbiazRCRA9TVsSAnZWagAAxBQP/jQV/bUbz7vhhU735s8i\ncQ+GLJdCHilvqy5IIj1uSuYf/i1zpLi5Rwu+lQ5KbFmm2n2SMDI8eMVQE11a\nCfGWSsdHgZTbwCiXmfDZ1OpGfc1YQCjh+ghx6kNcMqfwG4/zZ/hHC2w3aPkd\nR8+cytSOWkeuqBQ7/mqyZC9uBXeMg6PfCfgl8+B7XGTDFapsoVaOIH2iZG2n\n2OqtHMM9aE7Mr1sFzMCa0uTZ0HbmjszoOwkRWaxxCODFtmomW13442Q1Pzta\nk/haKhNKYzCu/wWzL3WsHOOPSOE6t6E0jjL4VU8cS2By/gC8tw6GK8QjTJCi\nWQdMU4GGX7FJiwRv3a2A98sPO35VbDTviASCDmC8e7MAd1Ri/bXiMykFufeJ\nkKbn0Ji3iGplG0r+dQ4EHnRGikUlB89sdoKPft0ArTFSosCoFNAD/Xey+a7p\nx1CgupVZfOqIEJ5XEvkeIE2d8awPe38SOOBOOVeGZfys5TEc5f5Rr5U9O1AZ\nsjkGEuAXQdDDbbmv0+bh0Slycv0uc4MnUsHYC7UyZ0RIs+qidk3yl0X9RU3F\nT13LLbCVL8qARdkwkHgG7iUpUiZx6v2xXalweJZbRrB0MmHXQdalLg5d7sAt\nI6dkmE0gg7HYNzPUUu5SG2RiHQS7r1XUe3R6zyBMabqWjR+228Kmk3HSHn43\nZ0bi\r\n=j7M4\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"6c577b6654f1b08ed8fce8ab43c2a66cb28f82b9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.25.5_1535749329001_0.19184557244221545","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.26.0-581-pager-table-1c46a011867573a1ad4444eef437f57bfd6da91e":{"name":"rendition","version":"4.26.0-581-pager-table-1c46a011867573a1ad4444eef437f57bfd6da91e","license":"Apache-2.0","_id":"rendition@4.26.0-581-pager-table-1c46a011867573a1ad4444eef437f57bfd6da91e","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"671ac3292325be5b98a66cad78049f9723f69fb0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.26.0-581-pager-table-1c46a011867573a1ad4444eef437f57bfd6da91e.tgz","fileCount":128,"integrity":"sha512-WGjgwN+uwFU/rlYfnmTNgvwrg3M0jRt9qwYAHTahPVeNBMzPpa92AlRtaABQy34fIsNUMLJOA+LPAG+j3Au6fw==","signatures":[{"sig":"MEUCIQCZRx0ZqV4w8/bQkBOrb9RR6wRfpCvPXI+tuZSX83skeQIgZmINHFswTmQjgLEbNoHfMiP7s2vnnIQ6ZpcFPLx9tUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjm2GCRA9TVsSAnZWagAAfrYP/0eeaTVevSIGFt2LiyiD\nAhqBIo1xGopyfZCNOKVQP7lgLw+GVXJnJAEcR1UuJmn3/AnSHMtOUihLqZQf\n5atcgA5I5DLaOE/qBZkWODbRzKULQoZT/Jw2JEy+q3D7+KNKuzFYAlYK02W0\n0mdlIRFmc4IY+4xy4aKrUv4QTC+df8KaggL657oSxYTh6UnzxGGHrDCOMmt5\nRc0lH1FPCdYrew5LNYkEbJqROlzkLSCtgRiC6/RJlbEl9q73I5E3HI0efcIH\nR+9lVKRJUatK0dBM6I/huMZBC9wozb6TWKpQDP3eCmgj/7PRt4Zpw+Vx3guP\ntu2tx7v0uo7KaqP3fINfN+YDlPspGR7RWj4duQbi/fREddMvtnFDYD+sC0vf\navs3F3w1G2ZADlIHbNao4goyh9h9B71Ak89n/KUuUc09yqjoDJ/BiKCcoR6a\nK0EnPm7uIr1diLi3UN4OCPE//Fc8NSUyo/grSFcmJVWV3CumwbS86TOb4url\nBnmxKUcuKn2VAL2SPTMWp/9r9qD6NUsr1uSxD59qIgzMIWfiAz9dk4n/NqS/\nX6JJJcNlj8Zj2CTviYR5mfRtAe7+axR8XAKbkmrELPTqMEAG8uATrbCCz6lP\na5xxn82NO0Lasq+GEnkkijOZFSey1BpDccOcU8TNZP0IlynboJ7A4mkq4r3k\nJjOk\r\n=wUej\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"1c46a011867573a1ad4444eef437f57bfd6da91e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.26.0-581-pager-table-1c46a011867573a1ad4444eef437f57bfd6da91e_1536060805298_0.3641162013921042","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.26.0-581-pager-table-731ee9f9e9eff70ed8c39b856790093a2bcf8e47":{"name":"rendition","version":"4.26.0-581-pager-table-731ee9f9e9eff70ed8c39b856790093a2bcf8e47","license":"Apache-2.0","_id":"rendition@4.26.0-581-pager-table-731ee9f9e9eff70ed8c39b856790093a2bcf8e47","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5c44e06f7cff8dc1e53509fd0097daca4f3de95b","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.26.0-581-pager-table-731ee9f9e9eff70ed8c39b856790093a2bcf8e47.tgz","fileCount":128,"integrity":"sha512-Rky9PrUfq0Yk5MsAvLoRDd1ZTqWJw+fV1BcOx3wlTIJATDXYYUZsd9wE2ucvK0tkILpc4/hW2Btb3wWg0asG7A==","signatures":[{"sig":"MEUCIQDRUhjb3Icti1CYRC100E2SlgnND8kkshmeLpSB2p8uuQIgE2fWaTm4HnpC5JPkPYJwxKo5ULoC/VFtUJPFxMcGO+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjniICRA9TVsSAnZWagAAdaEP/2mMrUSQiXCTCv9g+8iR\nFC4Oln26diCcsQGRmapwFXR0VOwjQ6k5MBcOZQBUxT5qszNITUQYrfqt8q00\n/OxRHmkgCfFQ1e55d5Smn5tErH3hTNt71GuEwNjIkEHiS0g7N5Jkt7mmqYoy\nqINzPM2QJeCB3d/W+mlQCI5OTI2drhyitD3AAoDMIhR/zSmUttE2tazhsKoi\n5PVgSAn3GpMG/qzX8PDW76/9TiaoFpOSmm60+4NTAr0QAQRxPuBFLDqi2wzT\n7TVyxumkkaMABz8w3P1DWmI2HavMvAcEOdkWYsOiPDO/0msiOzPQ/s0MqHS7\n76tapI6YwV2S7MHnrzJK1LKCHapppnJh3t6ky5agYKG8f6148/Qppd8ENlR5\nbuYhBY/dG2sk4rvl9NzZrPoXpxt+w/G5Tbg+KrHDQlHN0FOKIsVlfZoL8NJZ\nmuraoK7S4hZkVYS3pPygj7yAZAOzXMfR+xONNZ0zM+PRStikJWaJfvzjeF0m\nWtmhEBju1HkotEiHHdJR6mIq3UUoB5WIKO6cVzluP+rgczns9dJxLn55Lwzr\nBg3fz3hQOYoWkRxb2qUYM6f3gyfkPSO2fPGPlq0j7DZUTOkXa45ZbuVxjY+i\njC71+7axBTLh/6+KHOmkSzrmVQ1VsNmIceZr2ccgylsO8l+U7Q9IqWWCQ/mI\n6QlM\r\n=UaEm\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"731ee9f9e9eff70ed8c39b856790093a2bcf8e47","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.26.0-581-pager-table-731ee9f9e9eff70ed8c39b856790093a2bcf8e47_1536063623211_0.38890040946669635","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.26.0":{"name":"rendition","version":"4.26.0","license":"Apache-2.0","_id":"rendition@4.26.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"71be91ee3500c2a086983c0ac961c678c279b56a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.26.0.tgz","fileCount":128,"integrity":"sha512-0vlO4gkcfSbiNNr57o1ozluHBE5eqww2kRjaI6AHRqwCSWmRrsD9rMX6+RsDHN1QF0JnDC0+GW2o3a7KABEiOA==","signatures":[{"sig":"MEYCIQDB2BH3InTQu4h6VjL/E1OkZekyTb9TBBw/HBCpYBozsQIhANUwNNnjYmxSRVtvhIvuZhTpkY783DrBjbDhuc78BdrV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjoH9CRA9TVsSAnZWagAA0wAQAIyRr9s9t9su7e8DVXNE\nbZzKwHKcrSqJ6faFwqtd8jyMcN0yThAGo1N8V82FDp7YukfBUeiLYcZxQjCl\nqCkzcNCRBQ8iKdUaj6VWQqUos1LfqviR/X31uQO8UnDpsUFhBsvpZI/v7/zk\nj5Ktdn1MVRUFqXq0/bNQPRqxugsnBpLbUObzkpFlYLCKZbL1/QgnMHBFanOW\ntCw0QcaXsCNZPu9nqAvd34pG4M/ION6RvX1pQhE2fNT7fSMRtBcCULTFzGbJ\nyfgD7MZjdkMSG0Grq+9mROt41k/dnOSK9DBUexwgRqSQGMPAtH52B5QeZGre\nVdSUXtwuCV9zSHRMHwBdt9Mi2cUv4Q7oxW55w74wvYsXU6Fb+ELdgV+VfdeH\nxWhy+Sr25QRTKnic1KM+c+cDmGv0oK/lO1nL2xftIOh4xDtDGPLvWZsyYMZU\nNO4fJAvfXPFKn19nBSxYYuU1/kdcYcUOv/l2xENRZY2BKCRbKlZRHq0HkBC/\nc2ye4bIdvendljEjICF/fLqi9pAOhf6jWFMEYWlQVTXPlKmFoIjCmsaje306\nVaxWkqMEInWnJHqeo/A2Q1hJkS6vWzCPHrGdwXimBf3cMpmFsJwheIG8mbOw\nls/zwcdY1TzsDaIHzU/zbCW4azGnb2Jabm48U0pvqEQwNLEi0XUheRygExcD\n7FrM\r\n=Li+G\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"b324eb929dff4cf58a5e0b14771caccfe3fedd21","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.26.0_1536066044885_0.34884792941182385","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.0-555-code-with-props-hover-b5e7344b5ffb774d5e6b038ca9e4b61f5ce9f883":{"name":"rendition","version":"4.27.0-555-code-with-props-hover-b5e7344b5ffb774d5e6b038ca9e4b61f5ce9f883","license":"Apache-2.0","_id":"rendition@4.27.0-555-code-with-props-hover-b5e7344b5ffb774d5e6b038ca9e4b61f5ce9f883","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"7670e565e0198faa06143b093e6b8e4dcc119c62","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.0-555-code-with-props-hover-b5e7344b5ffb774d5e6b038ca9e4b61f5ce9f883.tgz","fileCount":128,"integrity":"sha512-bDHbtiJ1AniF+YBYUk1+K86WZnYAkrCu3+elKhNCh6ucjS8I/5bh3siuiF4CnuldL1GKgLGwM76ZEClGgYcm0w==","signatures":[{"sig":"MEUCIDwoG+iKxZZzLtVV3b+7cefTIWlEF95X6slBcywLiu/eAiEAwtnpZx2pW7N8yuOOr2xOB///ceRt7iYfQupVbHNGXB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjoQdCRA9TVsSAnZWagAAV7wP/RRTOxQ00aPhQ70JHy3j\nmkrhpvHiG7fXmKPFArE079JGXcVGw2MdEOX+ZgHYtl7Jl3ppSd9cDzjPEYUM\nSDLea/0fWOmfKj06ByKwdOg8Qwl3sPTvVk9Y3WqLP6E2UjqSWn56uwp/Xeq0\nKm2R4Kljf41SG94/W4Ij9GsxKunr7R097378wyGvnsWoD1yXYiH/PUgXHmM8\nMJWzqy+IEn+rB5ghm29hFQjkD1mL9hxdCaT80gd3cZY8UGOgWz7OTvoeJdtQ\nNZluYdMxoc9RpDy9u83wrSUu46Ou0n7JAvxKjeTkXrBUyjN7Q+NYdmoZfZ6n\n9CiaoqD4oeTXZ8AcUovZ1fPE6ecCWmidkIufEpYoksPtJ54Ptmwx5p2Pe8pD\ni8X6Rvx7gpWHtSH2ZkYlTfQNoHnfYjmipVL0g5VFCLlVgTkt82xY4sOkQPIo\nGSHcdCGqZ66/zYiI0mLUEKF7pHkRmp33pqqZFdINQ+yIsuFszbdGaIrlkJDS\n+IO0ug2PDX8ATX8vSXwELKJTwYl+nBR45CmOmJJpQF+S3OJKu8TL6RoJGYTV\ntIrBQ9aebvlUJ+KFn1xSeOHlOOxPpEZ6ojuFCOLfzKZHF7z3Jp61ZFcwH2i2\ntUBAMIqpAwrw5dleRvgGybMSpTJSLZwMjPrq/efT1XZRo86fWEYXtyOD9Bu8\nkzBg\r\n=DKov\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"b5e7344b5ffb774d5e6b038ca9e4b61f5ce9f883","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.0-555-code-with-props-hover-b5e7344b5ffb774d5e6b038ca9e4b61f5ce9f883_1536066588283_0.3029832959376175","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.0":{"name":"rendition","version":"4.27.0","license":"Apache-2.0","_id":"rendition@4.27.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c88d4ea0ab768b957341bb71965c5dfe1845f03a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.0.tgz","fileCount":128,"integrity":"sha512-SQZiTbuAftPx7/bDEVNYsL+Yjsym4tCMZnEk/5CM+t+fteHmzGjb0L17GOWzcwv0uoWGhcvyrg3tpsic5QTsAA==","signatures":[{"sig":"MEYCIQCxlXDu0N1zZyDI+VUQR/Byq5dPj1JzuFQTjGnjUw4klwIhAJZbIpG32aL1gy3DIePLrHNutKJC9jS2VI/qneV+U6tk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbjoZNCRA9TVsSAnZWagAAZwwP/jF9W+vYiGMk2hKdLy2H\nuWhDZUAQXiocbPvLL0VwiJbA2LPnu+apyJrnJiV7Rz7vJ8+YflKn5Rthrn2u\ntJ6PyOWOO8FF7zO/tG8TGrldwK0zEtfu0fI6GdW/r7UuR2VADNZwfYDLDOL6\nZm9dJ/Z3YxhZJzVqHMcc/uaiznWPmXvVAC4zD3ENB8gj741HIv+UDJfrcXVI\nr+vDuze7M1/jbY7zdyYmnKLmXHIncAt4iWCM4MmsLDiVamPM+HFe8lt8rg/x\nDJgO7WWgZouiiIicix98Fzhu22/ykZ4uwU/XCGVaokzkxsV6XLc88/KW/9yE\nFsN2+kVRd5wkAWWhi6rsl+A95adcZvqRGjWOWY8NlcR5N/Fx8ajS3s+CDa5J\n4RC+9JERjJLWBsahnwsaFqUS/gzLgPQZw3+FIEPnvOoUpT+ZQJaS3J2uwQzF\nxZFLQFVScFlALBolhUkU50Q8ibxrmddWnqia3eXzB62dZayS8zF52WOBa8Lj\ngCarkva8xoH0KtTml9no/ZRXCklFJk+HYcWikwDQ4/6kr1RIjV7B9xutlUoh\nLGt/IwqVYhL8WwTumcoVtMvwLtWM95lgKezkRAl4boMiuZdizT/UKJItYgil\ndX7Qo3pEvLgkDt7XY0VnQeaeGIyUcJumv/u3qynpE9sP2/80DFyn+BPFaxG2\nOuT9\r\n=fRyl\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"680464f8ca8ef032c174c50f11b700c925921399","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.0_1536067149099_0.8028710048554466","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.1-583-remove-box-267c167cc642e2fc0815b2879d5502c85c149509":{"name":"rendition","version":"4.27.1-583-remove-box-267c167cc642e2fc0815b2879d5502c85c149509","license":"Apache-2.0","_id":"rendition@4.27.1-583-remove-box-267c167cc642e2fc0815b2879d5502c85c149509","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ed8c48c0aca86db2d641869349124a000459a6eb","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.1-583-remove-box-267c167cc642e2fc0815b2879d5502c85c149509.tgz","fileCount":128,"integrity":"sha512-gIeNZanOe5lVsI4O7TjChUcufRcsbvPRrX4bqNf5w7Ajf3mD+CvXaDZlI+PVzZmG5Um5z9XdS4pqDU1AMtp+DQ==","signatures":[{"sig":"MEUCIQC7C/MwN+N9GegLWeYSdrNnKBA9TCLdE4gZ3mOocPieywIgNSiiFTh4TFU8+XN+Sx5K101nGBYtpu/bZUv8MmOHOL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbj9IpCRA9TVsSAnZWagAALgwP/RtYd1+faORWRV4N5VMa\naJpUM+f0n/ChBh0DGLUIbGAEe3xA5DF5vumxk3otNYTy53uZ2jxRLN5bzxq/\nWcGZayF4xBaFr5MnCqEFHF/5jcTAppzDM7LfPxR8Su2T7/Gmk8vdRle3/xAM\nfKyHhaKZZ4VeQ9+l4UWlurLo0kxjLq2qd9KE5pPt2xjIrmlfG4+sogTUV9Wb\n+wY5WN/VALhjAGXjb/8ZIRMbkb/3Oh+T4FdVQyj3xs2Flbcax8AjpcFwCoxL\nGGDImEPKC1wlM5G3g19R2SWZPbjuxENwzLnjHkgmKLmmFWn4q98mBQ11fASi\nakKwbn16obMfJyyXNVnLdkWYy9VIVn7OQB2cQzxk9g/apYoaSNv2JbkG58nl\n+QVMOqXcA5CkDdN6vDcgcKVjdTZidKekzdndJWs19070uxS+4ptuffw+AG9D\nUhp/6vdLsQAoEIGRo6UPeT1cyLR3YdR9I269OIm+Q1f78gqbZc5qF8DyYe/V\nx8nhIsUkUGp9Akf1Bn/1QL2RHawzUwPw0KjsI4OdhCtBSESCFA+54Gu6EdW0\nqGf+08B7t0KDhxPNsNh2Si+3PIsQkFnXnyFSEG0Bm96j5Jw55jGG+66QIWt/\n0EeY7XFyHsLJEDda1Aw3847zFe12RCh71ab+RcANC7CsUT3UxNHx/4SseQID\nLVYy\r\n=S6Jy\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"267c167cc642e2fc0815b2879d5502c85c149509","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.1-583-remove-box-267c167cc642e2fc0815b2879d5502c85c149509_1536152104438_0.0028457835986896995","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.1-583-remove-box-620a1ebb711131a0c86d42ac4826511dd62a50b0":{"name":"rendition","version":"4.27.1-583-remove-box-620a1ebb711131a0c86d42ac4826511dd62a50b0","license":"Apache-2.0","_id":"rendition@4.27.1-583-remove-box-620a1ebb711131a0c86d42ac4826511dd62a50b0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4be17a705aab195ec66d9cec94ff0548bc29b302","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.1-583-remove-box-620a1ebb711131a0c86d42ac4826511dd62a50b0.tgz","fileCount":128,"integrity":"sha512-S/Gz03zKf5q8nFcpdjvp9ea12mZNrTDwEcRxwuii/DXe3MuaHprT6/qEVwuf6EqRG2pEFGKRqNNt3VR+WCF+0g==","signatures":[{"sig":"MEQCIFsPRKrJOExtIJfI3lpyq4QvR9NJavYEshD+kWTRJrVyAiBfAB/MSevRihml8FruPWKTnQQ9i/dPCVn4n0bfMN+52w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbj9P7CRA9TVsSAnZWagAAzH8P/j67MM4gzi+mDK+5VrCZ\n/1jaKhAdynqdXlYhbrprCkMY4+qWKreXYM77vkwhCymqAgXF10oXQ58RIKBI\n8PrQZAmkHcFcEjMXoqZG4tCEoOSnKJ7qfImSTo58aoJwlDZdZMnxNL7Z69sE\nRny3xUG99lrjzEhe8csgdq56+BZFmhsgAexOxFG0cGFe3hao6+zE2BR0Xjwc\nU4nC0HNBMYA8xgXSqI3MjgTywsUHzr6kCtPXGQTn0xK8fxjYtWpVfDvB3tFT\niv1ZBsmk4XL99vpXgTZk59F8WEquLatmfpsPyOEv8D/9EwV+I/E/jyjcyz1s\nehBa8nth8/llBHOesVIKFsTcZlmN1lTbgdPYd1bJk9Y8oPq6ntdivsXgxN5S\nAfddw3mlaDqBMkROe5p+2L3mVrqkipeHzMjXW0C54o/roku7IQzek7w4cUQf\nLlZ2GVii4KMFk6jU9VAOAzKrDsYNST2h4s1mv/4kGvzYCb9uTsM3AjUZGZFq\nQKpA9fJ2BGZJdI+9fFabh4HApOdPEb/RMDAyYe/WonZAphqQF/Q+wwF/VkC5\n805rUUIWCumIhuNYlto7s1tQkxtzgxBKTmR+vDsZlPEn2Z/gVaTTYkpRzq2d\nbxUkIWB4rvLTjqli3QFVbG+TpZcFfrN0NooydxpgN6GNLvXk4Y7xLNjDYVhj\nvmnW\r\n=1r6E\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"620a1ebb711131a0c86d42ac4826511dd62a50b0","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.1-583-remove-box-620a1ebb711131a0c86d42ac4826511dd62a50b0_1536152571050_0.0042692876068939345","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.1":{"name":"rendition","version":"4.27.1","license":"Apache-2.0","_id":"rendition@4.27.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cfa417c125980c44bcef2875037cdb08b9e9df54","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.1.tgz","fileCount":128,"integrity":"sha512-oLKs02JnQilR9V5EF9eK3QTRyXTwpd6A+KXAIlv93pbh164fSus1iJA9Cv9XfKbKrf1ztjo0qzTmI/FdIH8h5w==","signatures":[{"sig":"MEYCIQDs3HgUWcil3rDO5ZkkmmZzGv6wIt+10lcHKSjNzGsHxAIhANOIStT2lYJznEXzq3daXSKvSdXL97d/o8gDQLpijYKn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbj9f4CRA9TVsSAnZWagAAwRcP/2dmaX9nLYHwxotizicy\nQYh0jCeHX2igrG05HjbAn/9i06y90WCfZCVpP8JYjgD9Qt6JyRPs00gbDWGQ\n9hc7ouVt72t+mKg9hnC3Ehx2WknYEueorqaWew933q1Q1nKnnczJha9XL1mv\nZJ/ujLVDtwV3FCv5qxyY5zZ4HPBgQe3SoOmKRDG0CtZvDoshRYRB+QYX+8jn\nKRF4H68VFcUQOLv3PuoIMwJz5fjxPb51zn5+RixKt4BpCbABdMNi4ffWXEoF\ngh5HgvesyGg52eGbW5uBwuo/QG0XI4y6nB1unwVWJvqoHaV9E1rsgOQONjEI\nYJbRPVvwXdikQfg6gsEkRhJNZxZYhGBarYeo1at9Bn/ncurZUGH/KP3h6Um/\ntnh56yBspgGP8g2rFCy8giwem31SWjEOTfhd2wFp0ZOlmdkOvO3wQCDTKfSc\n1hljqpB4IaZpewZnC7o1gY4BWXVzfDHzOsGttr00qWoGibp/hkKg8y2ZDLxR\ncxc9wKeoidWyi9WWdDU9eoWyOet2Vb0nWoNgKxf93IypasGQ//eUG3XHXqZ8\nH4EZEeTkaxaxU6vEpcZbU3Arj7ni/foslqk+9hQLCId2kibtLrIAihNDAXkt\n1FCMJgU5XMTanSbB3PnSu3l9NgCpZtWY8XWkZxDvKLXUrLdf0F/1aGibykau\nEROE\r\n=ACzD\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"e6a88dbe8d162cca2897e400f67cfb61e71c8732","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.1_1536153591957_0.9135285624216483","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.28.0-flex-compat-f584533e8e7f37aaf83834a84b491034a3c8d296":{"name":"rendition","version":"4.28.0-flex-compat-f584533e8e7f37aaf83834a84b491034a3c8d296","license":"Apache-2.0","_id":"rendition@4.28.0-flex-compat-f584533e8e7f37aaf83834a84b491034a3c8d296","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2e3d8b1025ca1b8e4fb027c555ab00a3005c97b0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.28.0-flex-compat-f584533e8e7f37aaf83834a84b491034a3c8d296.tgz","fileCount":128,"integrity":"sha512-I6YpBw6EcIWqAtpCQ66AL9sOxhJ8/Bsz1DYFaEIwfgY3MvUHbJdyUaPnr9nDgCUK+s9uMNO6RHO4PIZo949KOA==","signatures":[{"sig":"MEUCIQCVFPa0KVbXdINiNsbFG+rw7hVCPq4yEsE1SJttbvZ5CgIgY+urkUECBlrgswBzDzANwHDcULQvt4nxyno3dSXkPic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkATdCRA9TVsSAnZWagAA4M0P/AvNpiDnPjxtGFrfxQGO\n7qc7dBJZNE9MQl0jT++lWoNDqip7rHGqHwVfE7ubwgJtHDuE8Z01c2KQ5sDZ\nYl6VbU++0kAXioCh0M6YfshcrWks/2sXy+pgrI5+9kzRmWlC2PmlKPtphMPC\n/KvxDgBJKoK6KV4iTYJ9EhflrN0jPQQLiVxGMTOAmBy30yKvDX98BqPjtI3D\nWOx8SWgFsm2Uh+D99EGD2OTHDvcUB6Q72SoVOyOA8C9PgrAdJHAdHcnsgn8/\nN50PxtA5sr4i5jQIxV1/aZ93vUOcU1Rd8jTW0PB4YdGVSpwozNRZ2YlzUIU/\nW9TEfpUixNvQ+Je4/W3FRLesOKzBggSahVBKy/ab5I9PqJQxByHY2U8isqgX\n2P5V6dhigm1jBmFr8xxa6xbJ1B4lVNAtRKwgmV2b6X9Y3TjvwKLIIse2v5RC\nlSc2xUEWL+LVoqu71jFroTLysAcaHcUkbJr7+HuN6U6w4TpSCrKG7k733LYA\nW8FKpPdecjrR1Xe3kWE3IXvrOmabZED5aPXRsInwbCOLKRrZmkUU4BRHLRTK\neXds13V4wAp6l/lpCeC+cnOuGOpzCuvP5/RHsCCjdwsQN81Rt1WdHfVkCESf\n5rPmdY0xDSkIvUt3jWU6keO01MtAmXUkr9n5sMvAaUCkj6W1+Bi1w56mRYWI\nDADd\r\n=aL53\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"f584533e8e7f37aaf83834a84b491034a3c8d296","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.28.0-flex-compat-f584533e8e7f37aaf83834a84b491034a3c8d296_1536165084453_0.7671343346637072","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.2-586-restore-props-12cf10d364a0b29f58ac9adc5e9512ee208e3e4f":{"name":"rendition","version":"4.27.2-586-restore-props-12cf10d364a0b29f58ac9adc5e9512ee208e3e4f","license":"Apache-2.0","_id":"rendition@4.27.2-586-restore-props-12cf10d364a0b29f58ac9adc5e9512ee208e3e4f","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8e130025f5ad19ac684110f8b12229730b113ad0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.2-586-restore-props-12cf10d364a0b29f58ac9adc5e9512ee208e3e4f.tgz","fileCount":128,"integrity":"sha512-MkkJjiCAviXjkV0I1jnSrb1n9ivSxGoco8DLN4XceZWWk1G0GzRnNvo7a9d2zgztAEyo3oiIY3bsSd8/lqVMjw==","signatures":[{"sig":"MEUCIFpjAAgFNzBd7LRwH95tb+Qo8TLmZGjO7krh+LDSCDLUAiEA/Z0c1I8fUQMltAsC+APn31FbKCFdJOC+tVqGEh4WKd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkDRZCRA9TVsSAnZWagAAm6YQAIgZ+BOnADmmzN06iXAx\ndFiUX4ZukUePiB+W1O8NgINUnAdUYdREDz6Zhv5PVRu51wZgYY24CD1I6ws0\nQ2KMqaXOfEHyowAOXJduC5GnOwoPf7iBimV5ub1yGTbwtsQa62B8nG9h4Uzu\npUOV4QE02c54oAarei3vD8Nx31jnz+BhdTxHcik3iqAWYKA/OOrNg6CwgyCN\njbG5TZcP+hIB7ahY/nJKCHbAHPI2fSOVOg1hM+m35yaUBSyigxeptpGuMoiG\nJcQ/9sr+Axx7t2KwrOFguKbudqC9xmZbKCCRFG4bfSp6ObtabGR49bDKHIvf\noS6RxYrYu6sFQ9yLx9LO1A510WTPUWAwB102Czlzx6gGdbxOfmrLb1caabvJ\nCRvUlLVp/l7/QVcVwDUEFGLG3jeWmGE1YFwVMDoJvx9vM4n5PmZkulr7bRD6\nYpUTWzkwmwgj7IBv93AhBZZm42m7cyMrjQGrfwjle2VwEOD5Irc518aLMlXF\ntIP7sfHRpEC8iiikxSVyM96o6Xmfb18QyGh353DW5hELRmNuO+AOTOthEoST\nzCSZnZK+D6G3S7H24Rwj6iSTw05bWuvqE5BGhMMFOfK7HlmXL4eyalNKYplW\nPLI7flf5gKBUPfu1ZQW6afNmLrFODgHE8dSW4euT24QMID+ReLafFqzm5MxO\nGdVU\r\n=PqPT\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"12cf10d364a0b29f58ac9adc5e9512ee208e3e4f","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"^3.2.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.2-586-restore-props-12cf10d364a0b29f58ac9adc5e9512ee208e3e4f_1536177240924_0.8108225065674526","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.2-pin-grid-styled-615447b838a26e4a57ffa166d4377eb90a3c2197":{"name":"rendition","version":"4.27.2-pin-grid-styled-615447b838a26e4a57ffa166d4377eb90a3c2197","license":"Apache-2.0","_id":"rendition@4.27.2-pin-grid-styled-615447b838a26e4a57ffa166d4377eb90a3c2197","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bda2e450f1ed9afdcb1632014d67132c4987037a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.2-pin-grid-styled-615447b838a26e4a57ffa166d4377eb90a3c2197.tgz","fileCount":128,"integrity":"sha512-G6z5fy/Xk+6RO2Tx1gFzjmGej7ZVH7ix9c34j+fTjRC5G3L7/sBe9KgjwmLSTPbH1IC7lyYRcNdtvO513+LKuQ==","signatures":[{"sig":"MEUCIQCJ6Hll5vzbDNbJ8tZhopL2YJlajRjCWBySpZCnOzAvZQIgRXI/DcwBtSnNIk84fyjbPzGRvh1LFC+VKy7AVCjCNbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkO+PCRA9TVsSAnZWagAAOYkP/0pESRvdKZ7RPiNpdqpJ\nl8kA2ahDX2va61cPgINe0sogGXpq/GxK9I+gT+Zq6OGWvmfQmam22Lym2DVW\n12q967p+ihNPb12cMOG3PEOfUHfjAsUGYfs5k55WLukdwNYxbuHxFKzdQbMO\ncrIf27mdjcUT40BCkT8GjeT/OLUqwq5A5t+H932VLublu6bvAFjepG9depuy\n4t/2jRBEjAvxvaGgNWwqOsou8gB1wZKGQ/oQ2AbYGeZdOpA2cAe2nBOnsPDF\nTSYapZfjA79i4u3Am9Y8qeGkyf61Wgmza5exfirdGbxn2mOo68acLPGDkmlC\nDXszpogX7SBD1dawP8QJ+9AgXo2ao3SRynR7YWhfioVOsqges3PRrAI791q6\nDu4aXEQ8fP/15vErmd7iUYNg0MBpouVJp2Io9HOYyv1aeaC9P4/w/qB+9ubH\nIG1//GtQ7cq1BZZZQmi4BCSFV92wDil3+CWcwg6HrdaODMZOBAM09L5zrt3V\nvRrdFg1xy/fihn+WlPJciEEVmywFXxyJsORmHDPakcxXWpJriK+lS1qFs8Fq\nqZOXTxqsNCfMTpVXKRWfWtgxw8yJNbbFSzwyZKW/07JVD1cIu/+nVJ2NJiKn\naGghQ1sND++DOHIrDPGix2xIFDU9ui0+81SQIz4IwtCT80PwYbGX6DHrieJp\ns5P+\r\n=MRG0\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"615447b838a26e4a57ffa166d4377eb90a3c2197","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.2-pin-grid-styled-615447b838a26e4a57ffa166d4377eb90a3c2197_1536225167355_0.3227675078301562","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.2-pin-grid-styled-e8fb460b7e8d2ce5b36ab8976d1ffabbfe90a2e3":{"name":"rendition","version":"4.27.2-pin-grid-styled-e8fb460b7e8d2ce5b36ab8976d1ffabbfe90a2e3","license":"Apache-2.0","_id":"rendition@4.27.2-pin-grid-styled-e8fb460b7e8d2ce5b36ab8976d1ffabbfe90a2e3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6885da6bab25884f4b71f899c429416bc06f2c8f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.2-pin-grid-styled-e8fb460b7e8d2ce5b36ab8976d1ffabbfe90a2e3.tgz","fileCount":128,"integrity":"sha512-fbiVtoeWsdbaV7oVq4zB6JaxIlVxAGUdrMUc8IrOcyFSx6b4LzA60Ppu6JcAdKlJFicAEqD5k7oIwNSshYV0cA==","signatures":[{"sig":"MEYCIQCralATWkxmRjQiFiMZpsroVFiy2E8MuziX2KkRcbZtgwIhAKBCtsJm/Vq5ySAUYzYnSmpYFBPKMq3nBg1e3CTEXwU2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkPFhCRA9TVsSAnZWagAAWDkP/Am34ux6yNtHPCBTPcc8\nSWcgPD6WE4gVvoqDiwalRYzdS1b6egAMJbltuEEeU8yzuxhq7BkTpYKszEfe\nF/mksyQEyheILCgZYOm7HoAxsy9sv/NslmDj3b70z+UaUlVLMTLkV2i6ydJG\nRokeTgR2v0usv4WOkmiOmp/2kZEXa5wyEzXmt2C10/ACEBotDhxWTxuL6ZAL\nDThyirweIlGLdiSF7dfaLlas8BHd3kGz6bXSjB/BlLVd4ZYNhrfK8vqU1jBa\nemmS1n4gkeFEpTSRs8/cYB96qN9nqM+la6Upp2r7qm5tyMqNvC0TqkXfm9ag\nZ/deTCjV3khlpzlZ2vciJBDH9PDsZAFX8fG86B7hrbowpxzjy5WDmbHveEAO\ns1UJjDu9TdtFhhAB9CK8tMyeYvs7xaGCWQaQjyuQavJalIjnqilMCcwrgyYi\nu73zUzk3FiTYO/6NmctqBrXPhPOZTWvYcL6JlcNn00mMqe+YU0+DdMz8q9/0\nB3wP4WhtC93ijaQuMj8AikG/hhya9yfLWMpFk5kIiCd4V0GaM3Cl+ZDohSZO\nZTRjcB/ZPIb+MVnJ59H3BM+mwPECDzAVw7jQI/j3IKVPFzQIZvAH4g/30RSJ\nuqU48cIIPNVrvBI4f24HvQhJbNqxhp13O3S6HyjDB8Qw4nFNX/3QqGjrErku\n+80f\r\n=dveT\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e8fb460b7e8d2ce5b36ab8976d1ffabbfe90a2e3","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.2-pin-grid-styled-e8fb460b7e8d2ce5b36ab8976d1ffabbfe90a2e3_1536225632361_0.10874130176688834","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.2":{"name":"rendition","version":"4.27.2","license":"Apache-2.0","_id":"rendition@4.27.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"988a3e96e15cbef38f5663dfa1acf27ca3e8668a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.2.tgz","fileCount":128,"integrity":"sha512-OdAxodPvsMSS1AwrcUCV7cyLgORBgy68WM3QjcEOILwN5u16MTR2p6T0qic0ePjUbW7iReSm3B9WUSls2A3Skw==","signatures":[{"sig":"MEQCIEZiuNda3CecWQFfN9lmXFbgqd2YSH4SGHuVFTXYHjE9AiAtuJkEBWYh4HLQ3nXDE3lvoZ4+bglN/EfEd8JGlMOeVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkP28CRA9TVsSAnZWagAAoeYP/A1Hwl4Cb3QqAFbD1gqn\nVKlgFNQxG/FSg65QutLknxOFxmxtuuUZMq9lhrL6QjgKsha2HkJIt0j0VsvI\n4HfZW8jKN2XhCF3eeo/8qsAuVcwCvqJcvLiDC6gvJP2zN6qYPcuFl4fhJyVs\nQ4Rtm5oK1VBmVp1B1eMEAi82GZumKFibzpcL30nm8LKcmbvPgXTcu7g/ofDz\nxfhvn6uNFSefYWb/BC1KjstDllJ/BUQmBMM5AdTSVPqQJ3e/XZVt1Y+DT8Oa\nPs+CgjMV+p59iB2KYRk2x1BgNWbq38K8cO78/gS5RJq4ycjblsfZNa1b96U0\nGY8eeIjdEMJIeZvThlx9jYF+6eye2TBMpIA4CXlXAW8+XljoSK+SlFFPYSmB\nTT+MIABMUwFVk/h5AofxxtK/httpPl0rlbrY6s9Osx4tKeY13iJ+KZbBGTC2\n0HwYdsnYs67suxEUKj4ElQzfyt0kE6L1VZ0qevt3lrZsdCi39uaQlwpZ03HT\n0L7ngYwDvzbIs+b1K6li1VokBEHym41/kmcoSvLO1gq16ycCcZ2ChWKpFxAa\n/M+ggbz3WubQJbd65mytJJjdFeylWErDoIEYTqFlPHJDuezkmpx4bks/6gAI\n/lTmsu+JMsOQd7hNwpFrHUqp4A8YKz/RnIhYVBHcVW/cdbMuMrp7cUlq/TTM\nno5/\r\n=SklR\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"8104a561396bf140b749036ee152037b65629cc2","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.2_1536228795553_0.49223308129532506","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.3-586-restore-props-e43c636b7b40b5f2bb6adfe30da89738f39a618a":{"name":"rendition","version":"4.27.3-586-restore-props-e43c636b7b40b5f2bb6adfe30da89738f39a618a","license":"Apache-2.0","_id":"rendition@4.27.3-586-restore-props-e43c636b7b40b5f2bb6adfe30da89738f39a618a","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"faa829cacda025c22c3e66f3582b79c52926b386","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.3-586-restore-props-e43c636b7b40b5f2bb6adfe30da89738f39a618a.tgz","fileCount":128,"integrity":"sha512-46mw8CwvmVQmrOlNWwaUcCqbXeI1Oe473Aax7shtHt0kg/tJTZVg58h2lKXYupKsDX0qxYcYYMyb5SM9/Ch6zw==","signatures":[{"sig":"MEUCIDea3Wch/rHnsvG0FLIrQFYO3lGmnQJBAn3Ddo6QNILLAiEAjmyNXObKfbLGDXBUwx/JFwM53siSO10rF7MZ7Wm2B/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbkoxCCRA9TVsSAnZWagAAYh0P+wYc7+mtl5jjxaeH1TxJ\nHtf0TOvj7PIT+PyZRG+tG4UCzBOfjD1Z0ca+tOxIQKyRAYiKG0pqVl8WB2Am\nPQrVEgI1pBO3xjQ4Kfa4+mcVT2s5E/BR9HxMJTUlcSa0YhC28dNp1jf2decK\n6cGyt2bsPIQ/Rm2wXCInoXNia48T05WO8A7w3HmsZeVCkjmDHA2gdwImbwWi\nHLMtdL7t4VrW7qZDpPS7qrz9bNCtlw4fpVvei7ngF8A2eA36yxjd4yP7SKIh\nARxk2F6S9TPXSQYtl0Sa256+KJLPlVx0WEDXk5MhH1dJcYd8mx/CzG2iwOAW\nohgrFd7mQ9MMk0dbDp+zWHjVNSgGE5DoIhSXeRGsfphqMdY4aqGGJ+mZYAsE\nBGgaeA2BPC26dgBYGTUvgaX8SUDTfgOSRRAtzK8du8VBqLqLCIKY3oOeewLC\nen5PoYn2eUn22EVKER01K454WkjdVs45NKNnekNUzlXVKwMc3X5qBvXuKrn2\nirxda3cHa+sXakDkNwMy/TMa5MRc7414tOhryubwQ9k8V2Jx4IemZgeMq0nQ\nao7Wtl1jy8oCU7Ts9xipsOFASFAvm6bSWyK29mhxZItUstJH2DOsTANqlCx4\nzHD1IRDpritf4HpuVgR3Ehjt/mqPyLRfedyb+GcC1JsLVwj0Ac/SisCaJWS5\npov5\r\n=xEnE\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e43c636b7b40b5f2bb6adfe30da89738f39a618a","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.3-586-restore-props-e43c636b7b40b5f2bb6adfe30da89738f39a618a_1536330818179_0.5160639056658303","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.3":{"name":"rendition","version":"4.27.3","license":"Apache-2.0","_id":"rendition@4.27.3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"dd81e43e0d09666b9585610d05ae8077376eb250","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.3.tgz","fileCount":128,"integrity":"sha512-onihtqQg90GG2RhVR6+3NxF37kWBNfYeU+OP7Gtff9HQpsNpXOJuqfpGCDlkk49YwRJtSiqhNo+BamAWFOoWSA==","signatures":[{"sig":"MEQCIDZsF0iAHMAgm64RetsvjuAXbTn6BZuA1H2yDNzO0yA6AiBaJsk03CB2RB4J8rsehL7xR9U5YYpdcvmsAz3ShV3rdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbko1WCRA9TVsSAnZWagAAxyUP/jTw1GZ7ZwTTGx+QGlMd\nlIHCBJaKJex9ncPpqO0g8I5i17cGvpZvVvgBgLv9dmLc/jjh4fukzi7mnleD\nFMZIvtJAG2Gt7IkJELk8EVTF2h12Q9Uf67Taq1xtvjsHQE9xQsUMt1IhnZzy\n1EcQvRwzXVeMflp19fxsksfLvVbz6wgIlUNJT7puJZOEgohqrJFWFC1Wyalx\n+lsiIaYZ0eyZNl24xGx2cATHzjT/GpTB91AhcjsUG6mUgMP34WU+gx7t3jLH\n21q4JHielYS5s3vKzLnLpX/E7tn4kWvA/q6lrxUdSgFdpe6HVGqOHnniJbkN\nV68Shk28mbRTtgP5YFa90Ln2M7UfN8Bt11YGodxptdftE+zFBCEUb6Mqcmk6\niN2iqScGW1HKMcalKP5kyAJaHtTK5fXvOK6FhVhvutbRUjzC16oenjwWhHRb\n+XHDPiFE0leLDcf8hPocswL4Lu/Otw1cHkoVL9L6OnRkxWup8ukUfgVjDaSu\nNV5ITUW7hUqEE7yEQYY01Y7iDMaTZGcXkLHUuoX1BqTFtbyutYJv9qQ/pzGM\nAnCpO2dq8/fGbWybqADR2wy7XqYxTwRbe7aZiidnAGc6REAtK4c4Os3rvknp\nEDUacUlD1TzsA9VAIaqh/K+mSiQJTGuHNrJrLe1w0z9eefkDtkfY/mXnEdsJ\ni5E8\r\n=GEIx\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"cfb8d953c46c0ade68045cf88a2d57350ed43c1e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.2.2","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.3_1536331093628_0.02623635205580599","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.4-591-resin-semver-3756a222ab46bcf1a29336bcf6cff5aec0c6daed":{"name":"rendition","version":"4.27.4-591-resin-semver-3756a222ab46bcf1a29336bcf6cff5aec0c6daed","license":"Apache-2.0","_id":"rendition@4.27.4-591-resin-semver-3756a222ab46bcf1a29336bcf6cff5aec0c6daed","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bf3ce18e06c1715183390b216bceecd2cb987a77","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.4-591-resin-semver-3756a222ab46bcf1a29336bcf6cff5aec0c6daed.tgz","fileCount":128,"integrity":"sha512-KD9m4P0Gj37o9zvx+1CjofrGZv/k3hbZYAmwy6Dt/W9iXK4KGYtjKLg+cCst7CrxJvtKzIQjKx9UDbctEWhQ4g==","signatures":[{"sig":"MEQCIGzMe615BE9C31c8Hmqp2p7T7fWBuO8gQEwFEAo86p3NAiAbNuKMHmk/bw1c6/YB88+4p9Yec9vECvgZMnBC2+JVxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboQOpCRA9TVsSAnZWagAAgxsQAKJw/CtwqDT/boesJIjy\nAfS//UJV4UB9u0trF/QXl5uF3Gu14kkqFAGqKl25rakM/qAUkFjrKYwc0kPG\nhkwjWIsugDSz7gQQN3XgYXtLU9peRAXQfuemYAbhRSaJ6yRkHM3Vw0TjUhC2\nIxxk7COy0KGcKKsXguv2acluHnMaIh13RF8sRldZvmk/EjQuk/nWCTj06YI8\n5kv1TMGQo/EZOdRjvcjDUNwNETNxy1VivhFysdC/HwwOMAY3kEwcF79wV0Ys\nVvNGpxwzrCLHEDsj3G042Q2Y5D3HQQZ9pHoFr0WjZ8lLO7DBWpiahHwF7gQh\nhp9J24M0oXqiHOW8pDHQ5ZaKbGfB1VYYRBU0m6NDKKfjNr7c1hog+PdBZv+t\nQOv9ElXEKGRIHk3QFdsy9gwRQK7X9MTtrzGur2axMRv14+I9xAMDIb3TReDm\nBqE3rRcZUjXbXzJOLv4rdnhoadLtE96VHKniCsTGdafbO253NexVBYTqPkPx\nnm2Xu8127kW+YYWxZILC1fXinVdRbVQEC91rhSf0Y2tkhFZ94i2D8I15cch4\nXB3eayp1zh18fOX/qZ/D3SNZsx5zi0kygs54LV0cUyNAwgV3O1jIC0LQvCaV\nn2mzRTAJTppbpNZXT6dfDLHiO++Xu1eztWTIpUlHtC8D7gvn9i2oti4kFXbE\nNWyJ\r\n=uAk8\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"3756a222ab46bcf1a29336bcf6cff5aec0c6daed","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.4-591-resin-semver-3756a222ab46bcf1a29336bcf6cff5aec0c6daed_1537278888386_0.2405674019165953","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.4":{"name":"rendition","version":"4.27.4","license":"Apache-2.0","_id":"rendition@4.27.4","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e2dfc64e222715ab4fa9f798f3c5a67605fc91eb","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.4.tgz","fileCount":128,"integrity":"sha512-JiuwvwsGuJtO3W43R3Vs4x6Uw/CwutbyXTtVvnfH19U6wCtvrcXNdD/vrNtIcZmBl+S6BTostFnpgfJZZSyAZw==","signatures":[{"sig":"MEYCIQCermZjufy7JEolrwfIa/HJZqhaP6UYJN4bputKrmpc+gIhAOSeZWJZe0QL0ymvy+aYLsEShjF20tOEZk5vFBE75GrQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboRQ4CRA9TVsSAnZWagAAKKAP/3qxMqsMCm3I5u03KEzk\ntrWHDV1dtJtgRHwwF9ycJ3SCiMDeE9dIwlyg4Re/Jo8YzWTWpix0Ij7KT8EQ\nb6/J32EgBd5cKgAHjANihRLXFRwzlwgGHEzowyHyCz2LgavEQ3SjSO1X7U5G\noU+aLMFNBpQ1PQegf/EAZgPNixlWfxxCM0l6FN5QsAqoms4VLuxl1SxYJl+/\nJ3cmiH+2xPdg2bIYzYC1nUI/zwp5A9xjjdbJi2o2Ks3i5DY0mHcC79Smk8BV\nQHSzbZs/yyeEWKlWp44niKxdXPHpoIZQkccX1S7TLyu7F12MWZkqNu7PazMd\nfgY8mDQGSwKbI0iT+4OP7GZLNfu//3TVe5A3SbQB2Yp42Yc+52e4Q1C98n28\nr6zb+NbV9eAbgv01/rc3A1xNDQ7U6a1MC7yCGZo7Yiq3NJI76nHN1CId9vhC\nANUp2OuBkKgACfoJTR7pu65ZgmImwPG0yS+wxaXwHH1W792PQesvb97VMfln\nsjeAFxcLCqX6X4tTuZfLCk4RWwmfz9saLpPHphGlCmvf75UNNIDpptL5DF5u\nTRa5K8myqGB9QjveACSHtp7+rj5T+7AmecL1mrxhkL3Q74gQWEosm2rHm7fO\nk3Ab948KQ1PkDsVdWuPW0CO1+bCUryj8oUWO4TSjerzQMw+gd1ZvRRa6XU9W\ngyh0\r\n=tZyr\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"705bfc51d0ad38bba450fbb206432f59c35eeb69","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.4_1537283127039_0.22628504892763224","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-bc79d057ba24e9d49eded430a67f8593ab251fbb":{"name":"rendition","version":"4.27.5-593-visual-regression-bc79d057ba24e9d49eded430a67f8593ab251fbb","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-bc79d057ba24e9d49eded430a67f8593ab251fbb","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"74772924fefe0c6ac6d6ddd8a0b52a8f294f8fe7","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-bc79d057ba24e9d49eded430a67f8593ab251fbb.tgz","fileCount":253,"integrity":"sha512-sawx4dpGi0QLHOma1qnzoMODRx1BLhQT+OD+vOnLzWWELfe6nWW/XAC8prYR73lLGBN9w6V22r9dE1TX1WNGZQ==","signatures":[{"sig":"MEQCICwPQFVFowjdtOOm3bETGp4MWwkiTJbkzsuGNasa9mD+AiAn6oVWQ9i2Beut58zdHClyfCDQzzr4sFXJeQrAlRBl0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3742122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJboi2OCRA9TVsSAnZWagAARsIP/0ozeneEpjQ+A3YjcvTo\nA5+U2jCv+i1EQ4aAy5kPfdTF1FvDi695dxkXR/Ze+YJ3NlLn1fEZ7ykJsxnZ\nMLq0VFaXQSUU57cd9uelpT4+5FTjYrFAdnK/NKrL70ob6meJhtjoJaMDQ7Ma\n4dx7vKbFu9NBMhM++Ua4mbquRQz40uZT5gaR9EeFCZ7MqyW/ohRLaBedpvMX\njtTN1w9ho+VYM4Z8caS/qgVy9QwTGHspC3GhifdaI3EHbgwx/lpEl/z0QAH3\nprhf9vynAZsYatBXPbW/s+0aqGAP29vTqYxWKwuAglLZZvb4uT+73VM22kea\nNfCfSttZ9ENefA78Qb4M5hf/U8CyBaJVOZ7SiTb+XqvMFTUBvPtO6BPYubl4\nFkjLy9XIkeHp8PxRnsfO48u//vbQU5j1125fY+gIgyZG+VvOCiC73aGWvKmb\n7FMwIK/2P1V0eVYdzHA9IOX6SRySiU49vCBmSbLeGYevB1nwOpPa8jrYB0jA\nKlCn7uaS6dB+fclTucP9dtZ8yxlYJn5cPe1OaVbgK+AkEUdjCMmYmTkT1SzG\ng40AHezS6bkFS30uF0rraxUID9O/UWC+0U+zGyB556kF/dnLH3miNHnKyF1V\nC7Dv5MDXrS4ob2UffV9yV1HXXGvbMceD/glPdwIwYaoSpjy4CYDNaqfIxr4J\nCdF2\r\n=bCzp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual regression testing\n\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nScreenshots can be updated using the command `npm run screenshot`.\nVisual regression testing can be run using the command `npm run test:visual`.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"bc79d057ba24e9d49eded430a67f8593ab251fbb","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest && npm run test:visual","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","screenshot":"storybook-chrome-screenshot -p 6006","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-bc79d057ba24e9d49eded430a67f8593ab251fbb_1537355149110_0.10939529034576179","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-table-tests-41e143b5731995c03b6d3e0c1853e0db32787d37":{"name":"rendition","version":"4.27.5-table-tests-41e143b5731995c03b6d3e0c1853e0db32787d37","license":"Apache-2.0","_id":"rendition@4.27.5-table-tests-41e143b5731995c03b6d3e0c1853e0db32787d37","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1859967e2005b7897478f30d9ba5334ae2002afa","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-table-tests-41e143b5731995c03b6d3e0c1853e0db32787d37.tgz","fileCount":128,"integrity":"sha512-FkINvzgge0cC+IUGki0BypQznSLQPlk9Fpash5dZ8Ijk5R0FtmHtGd17FsDzdYcNDePoR39MovZdB1A84uYNRw==","signatures":[{"sig":"MEUCIH6s8bz1JquobF3cps4ozeEPX+7hsKzdphLJ2uT5Rg8YAiEA8cYvSStmnm8i52lzp5VZZi27Z7Ku1rOqZZZglYIC3go=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbojgDCRA9TVsSAnZWagAArOwP/0ZqneG1FCnG2giDQreD\ngvs8V2De6Fvp0qgAycuQWDTdgz39l0QQxTre10+0DFYTy/eW8Ka83CNL1/Kl\nJ0JgJrzzxmZvXngRHVkspCTGkPVydLy8sQf0o/6AE3ylYxvgCk/AWDGpbjIC\nwisbvhkO4JxlILUFN9+INWAIN2Tb4UY36aZvNlp8Cfa760RoVHUkbNLVGrWQ\nj5PZ0kzv6e1Jlu2a37mNmXuapvKgGRvbDOeD7nyin1wMhsVdR4l0ese996Ia\nRWPU0muhv8KZ2dHPjIvj7PafKpxUtSl5+QmFHXKjNfjxhUa4+F5MGO9dNMga\ne1hxHzGzaNEXHbxXWGNhO9B3UzBN2jLu5kDCuFutqo50mt5YccfcoLUwIDz5\n0s4YqVSGUT/10P6aLiTfv+KRYEatBmGjdHpnP9A4QMc8y5pZ6Y61q133K49E\nujyfKTKAuqASQ9V+uLj/yT8cYhw9hBINnTM3fJq/CX8pOc9S6Cm/bXF60xiS\nRKd8WQ4jNDK07lSZpQdeCuIwjo3TCA7M5FP+6I2EDDoKE9a5eOFuwVHc6cTJ\nUASbbja1tTsFCUl5lP1um3j9VDC27NjELrpMttjHCko1riXzAFH0EPXDRGCc\n8lS+ufXibcMcdO2LOOvhc0E5fyoGGKJMffpJols9zmRkp4pv05HP5YoKO4qk\nTnHo\r\n=ypgl\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"41e143b5731995c03b6d3e0c1853e0db32787d37","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-table-tests-41e143b5731995c03b6d3e0c1853e0db32787d37_1537357827241_0.1102790455037217","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-c238ecba01995310c5c23670a1e3bde9303843ae":{"name":"rendition","version":"4.27.5-593-visual-regression-c238ecba01995310c5c23670a1e3bde9303843ae","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-c238ecba01995310c5c23670a1e3bde9303843ae","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"f4770faead0b38a66d354b3e39a1561821cbf299","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-c238ecba01995310c5c23670a1e3bde9303843ae.tgz","fileCount":252,"integrity":"sha512-S34A2zSgPStE28ZwjmGQIDaTNg3Bns7gRZ3jNbrFV6v3/M3+zDqEJQjTMWWI3EmLOVmwRDSwcbnftPYub+DhOQ==","signatures":[{"sig":"MEUCIBQd19V+nJN4c2qQpGp6RqQOnfCTO+6RlM3mokHyChmhAiEA9TepYlLkDbpfFtYroqVP7ICUPrL7iOOBnC9enCk1Vg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3751695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbokRkCRA9TVsSAnZWagAATdIP/2zJOzQbJ+3HmDmTg4Ib\n1KhzpS/YNxmartkP4pQBZpbgx79lt3JLaxVlRU2u3Y7/Y+QgPNtCCPZuxJud\nhkbkK0ODpQgvyO6IX1PPRhnh+2J2Tx9AvIy47o2CXUqsKo44F8vuQNw+JIXu\nqNeQORx9ZLWRphwJZ2/PjjadZBTNinHG75wZLWbjjvz+e5PV2YiMyrxZ+SSq\niOPYzrl6x5SvMChcXv/+6T/lDAkEjLsOG350xqv/VQOMMTZQxNKniZkd9y3b\nCAGnh8vguFu+aB44INmFPzTXwfAcLEF37V7gEsmcjeVXN6MHfid9Bsycw9aO\nqO/sR+1vkE2tsG6lnZ0BBkARJQYg0Dc7S5g7dI4XBA3c3L0LMkXV/W264bqj\nnOBsD5pL5Lg39f1NjxEahqw7OJ36wnOSiy862c2wXvRl6x92+yHasFGwXldc\nEQhhM2Kjz/9NRR9yb/1IuMa6UhmaayAwag6jQRDtwEqYrLUZJUVQuIlgjHYS\nKC4/ufTFtcmrM64NWzg+XFFfJJI2NyE72bUM/HUU+JnDLqx8p/heWrwfU1zq\nTnMJEv8SAEZ2KTWCovI5CNaAv1+35RUuDudFEYzB1zDzCO3wbzfTDrc7T7TO\ndPz/HyBhdO2HKD56sVsB9oH50UOFBzXzHioyQkTHiF52/4KMXLK5V0wYP5eR\nSs0i\r\n=91QY\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual regression testing\n\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nScreenshots can be updated using the command `npm run screenshot`.\nVisual regression testing can be run using the command `npm run test:visual`.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"c238ecba01995310c5c23670a1e3bde9303843ae","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest && npm run test:visual","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","screenshot":"storybook-chrome-screenshot -p 6006","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-c238ecba01995310c5c23670a1e3bde9303843ae_1537360996015_0.5120030448004669","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-021b7a584b59c240b0b4ed41d5fcda67bf384822":{"name":"rendition","version":"4.27.5-593-visual-regression-021b7a584b59c240b0b4ed41d5fcda67bf384822","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-021b7a584b59c240b0b4ed41d5fcda67bf384822","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4fb94b510bfb011d89ef99b6d255cfcc1b42f4c6","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-021b7a584b59c240b0b4ed41d5fcda67bf384822.tgz","fileCount":253,"integrity":"sha512-FykLZL7FJsM5Oc0L08gBNHTHDfCwty/WNfqPFVnU98nTRJ15N/094Fdfum1RXc6TlbAg2EOtOVFLJa9XsC8haw==","signatures":[{"sig":"MEYCIQCrMPH0eq52ESVhTz51xHrxlKAJUVF8JG6baVrpANAmuAIhAMgTbxAexZwLdrxPwIN5WKeyniqWEsPRqSwNlys+qqBJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3739247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbokrcCRA9TVsSAnZWagAAFysP/11z3uz3m3F+MVzcL02+\n4DMv0JzWmkEVwoB0xe+BGOHjdk9u6+8AXl97bdjz7zQtzZmatd8bM2kkHape\nU98dczxHIDRbwEN2OJ1cbnI/jgoRO1TZ6rTEHp/aeoGmUOydu1BN+lfa8dxN\noaK2ACtD2KYCj49odibDonfk3jhf59cytsoZBgU/zlISWY21xH7b9C5EGPtn\ns8kP7zGa06/CX5oz/rPdrFDgyHeB7ITjHV+KG1tRB7Q4mCifAAGK43UygLEN\n+mkYB+fJJR2f/imA1LW2/rKVFYP0xfneDZfgUyfSJfQRBJ8Jp4FmByQQOvQ6\nP/Z1e3RiQvqPU0MCgLBPwaY5mLT0G6qMdrK9eAQ53bnhls13aRhWux0nBEgU\nGfrovAhekCni8mVa5k5a2xXljFU0H45Xf6XZRP4tW3WHnLOG3x4fh0Kbxkum\nZfIgE4xsVL0d0kMX0Vc66I+pwtmXcEZ5eLeTgqGBbqCUvfopb7x/yel87nkD\nODuIhe2vRBWnQhu6sFwqCOs2WNyIdAOgr4jPDCBpcW2Kx+63mdk+ckj77Zov\nCl0QcAAxkaIQcXEsLEXUI85gAnGKZOjJmjNYRAluR5YB+rDttNWxaKC0DV4D\nwb6PMFQU+YTaCuvz9+ck96TyP/6kmAHSL0kYKkyvZxmFD8ty4jb//Cle4bR1\nB0P9\r\n=jH4M\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual regression testing\n\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nScreenshots can be updated using the command `npm run screenshot`.\nVisual regression testing can be run using the command `npm run test:visual`.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"021b7a584b59c240b0b4ed41d5fcda67bf384822","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest && npm run test:visual","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","screenshot":"storybook-chrome-screenshot -p 6006","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-021b7a584b59c240b0b4ed41d5fcda67bf384822_1537362651999_0.7968759252671129","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-589-table-data-bb0884119bdebeb06b6aa9163c498894d70bfa27":{"name":"rendition","version":"4.27.5-589-table-data-bb0884119bdebeb06b6aa9163c498894d70bfa27","license":"Apache-2.0","_id":"rendition@4.27.5-589-table-data-bb0884119bdebeb06b6aa9163c498894d70bfa27","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e5354091bd1936affe2ac172223ee1d388fce83f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-589-table-data-bb0884119bdebeb06b6aa9163c498894d70bfa27.tgz","fileCount":128,"integrity":"sha512-liX9+CG6sUxWxJ+YgsYRX0VWNhhOK7OHcZlc3CuSXuDRj7fAyfP7np3bPllW3ZaLfJnx/xtpfiD75dDbUpaFoQ==","signatures":[{"sig":"MEYCIQCSNpvPT2isLNlRHfyJTzfnar8lklxDIckxjhOk5ZOZoAIhANB6R3+c7WXPCJHhzxBihpoXGwc7/FzGz7zof9FxzyNZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbokzACRA9TVsSAnZWagAA6ukP+gLTXM3T9OEvqhjwCWFY\nXBKBSQwtcwxrYQXAGVlRged9jMwB36EfhkaBFWQ0ByowQ6TehCamjzx0ZtRK\nhw4fLYHNeRAfXjWSXj7d8VqwmRZO9y3EuJmV4LoazkgL0stmiOz7TuKy1zL6\nxwFLDsSK0U8mgSqtmltR7j8jhFzFRy/zPESTnFTyr4xLVpQYROZRTf38RCAA\nnUxJmKn7rxFTfDll8JAXl5IIV6ZZHktYEBlzrBrraDZJSvbt68r3aTFdwo7D\nmwekFoUE47sICdhjbDqEsteawBurSIKkyhUi6+lc12xG6U4OpgKjDdpQkcX4\n0cV2ZHbwFj6iKIZqZJc6q6qmJ5U+asy4dZVF+9qgcvZ8nkoXRICEm/v+An/k\n2Nx+c7G4Zh3xNQ1xYVWN95nYgfj+QAnOchAS6xD3Jt4sujPlCqqTst+l+i9m\nJU/Jh7hUK98MeWGAHlZekHaO6DKI1UUgYAaQ6VAF3o3sY1b44Wdf5VT3epyh\n1WGD5jnIUCvBO1xVgqhzvmFq1mCUF5b2qVkRH3xbrd6FNDyNAcmCVB07u5HS\nj70UOGpPn050E01WUA+KYJOhSWr/m7OGUCaIAAV6N9gqVVmUh/gS8UQESBiq\nUciDPJcJ/mjkAEJCzf8BVyPNUxuxBQjJcuDzA9SKHh+4puQl3VNve7VslmOs\n3hGY\r\n=fuCV\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"bb0884119bdebeb06b6aa9163c498894d70bfa27","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-589-table-data-bb0884119bdebeb06b6aa9163c498894d70bfa27_1537363135524_0.37576574095646453","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-40b5740b30a7b1959cc3967721b50becabe084b0":{"name":"rendition","version":"4.27.5-593-visual-regression-40b5740b30a7b1959cc3967721b50becabe084b0","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-40b5740b30a7b1959cc3967721b50becabe084b0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4d1ff6ecd0066a3f9c2c8ba66c4d45bc33b7568d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-40b5740b30a7b1959cc3967721b50becabe084b0.tgz","fileCount":253,"integrity":"sha512-0MqGAjxfFLEqKzg5isCrq98Bv8rAlh731Nehlo630/+hqrTcE6cta64hpTgdN5Tui6KDrwTXam1xeWXr+4M3+g==","signatures":[{"sig":"MEUCIQDhYtU82NPgZNkXxl+md1ko69PRWkNfh7Nsboyl3VV+gQIgPxjptvt02+eu0kd5V1WT24tTTLOP2fXeMJnSmBcQScU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3747788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbolczCRA9TVsSAnZWagAAvgcQAJNovkSCRwgFgbMLeD9+\nIKrx+7Za3CSX5Ax0TIK69FsOoVNl1QdMuL2zdTS+upA0gs2FEIhcFKXa6d20\nazVJY9t7EqBKUmzMN1I5+G4B+5hJVSpiySvr8WifJ0NfWOjxSiZBcDoWfryq\nPAFGGwSQlhfWIWkcAOVU1grotOLqAVdclyvWMsi661GEiZjbB2zRhh+VL3F8\nUjUfmVpKbP7SEbZFBcCnJ6LQA+T0iHkTHjDrFpWfRlMENnfIfVjXN4fnIBXj\nNfAMPCIIXRoUQ8f+kPOkjjsuwxy7mRQmIoSZruULC8bqBKL260qWRn04UkrS\n5K8RTTFudaRh7wMg0U8zW2VR961NGmWQrejqU7+o3MyeH0asnkOyC/SXNy5R\nL8i8bwDqDi8PoGyZRYspJ9+LzZy1NnoNBHpFjc24gFdhUKYOt5snTUXQMo95\npbaqZNIGdLq17chELvhlBf42yVoaNHiVfjUenDQDD2UYoEI8Fg7NfhxrpuXj\n+QBJ2Qj1rEInRhjO4ypWsSap4RSKyjGrUd2HY2+TdOG88LErv2w5/FOTTsEA\nvUQ9qHykkPZmiVAjyp5+U0f51bZ4YUSq2fBpEUmLbCCZGohwHIstQgKMUGtt\nChagNzlMv++W/k8RBSWP6t+5A1Ogl+mitG5T2d6/TwtU4OwK35SKM1YCnKQA\n71QB\r\n=sfHj\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual regression testing\n\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nScreenshots can be updated using the command `npm run screenshot`.\nVisual regression testing can be run using the command `npm run test:visual`.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"40b5740b30a7b1959cc3967721b50becabe084b0","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest && npm run test:visual","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","screenshot":"storybook-chrome-screenshot -p 6006","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-40b5740b30a7b1959cc3967721b50becabe084b0_1537365810838_0.21377927743400393","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-22e6c251a4add8157d1e770daf1b9e0a1fbbb720":{"name":"rendition","version":"4.27.5-593-visual-regression-22e6c251a4add8157d1e770daf1b9e0a1fbbb720","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-22e6c251a4add8157d1e770daf1b9e0a1fbbb720","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"861caf366f5ea490bdcf98319be003e04a55df83","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-22e6c251a4add8157d1e770daf1b9e0a1fbbb720.tgz","fileCount":253,"integrity":"sha512-5MBA/0KEUK5YBrkDx3FIlQWoKbMBLVdCigv5IK1UsZE0v4QQrP1Yh9EmAnQgXfSu9dT5pdEpY7JfXSmiuS7bkg==","signatures":[{"sig":"MEQCIEmCPM499Ny/5vJO/kv1UyL4kqpk8IPtCElO42vPL+m2AiA2At00RQvo7vG1RRt6J6VsArDf55Epvlm1A/8n2K8vJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3730750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbol75CRA9TVsSAnZWagAAZNgP/2n4lVQIhYCDZYKoHOfy\n5O2XRxcMbCCMRBC30Nry4XrwJbGAKLPbwhtf+ay5dTx76W5e0r2topdV/VBO\nui0ud/KIsvaaSzeF4CvInG6wIY3S+hxdiGvYkXrevW+zB7y2JVOr7cCqPpZO\n2ZqaZxGdwSzn/nq5XpqAL2p9TL32Rr/H1eZU4LiHhvUL2R2xYAt72sB8L2hy\nonUPntm+DjEDq5fN/LQu4BiA1kJQNui3Www75gDzBll5z/s5HSQ67r8Mpaxr\nOPnjk1eVedmY47sqSdFbG6d05PPODSxhojsvWop72t5qTDUZd/itulWNIxcC\nyQS1+eV3QLGN1zxc1uc7dLBESPXPDV4Ew30fawp2eelIWlZ/GPiqxPutFsiJ\nHFaYRl4P1R5WiLUUvzHUF2RHSxAtsU1gAualBG63+94aGaHXHju3DkGi/6fK\nxIwgHmoLXFfM4oweR4zcIROohYQgyUxx7thvvZnBpXiw2wc/jwEMOftvpXDa\nAhOPuIIaZL3gZOEwJNxLQNRP+AXvmCDUg7B8syeMfuLxQgQihwrpgajVbWC1\nmr5WnmwXUTw0ph1RUw5yMBVQjOn4o5iATKqdneLetugQdSPpJs5UzAtxKUEU\nmWyYi+G3O4VwRy7ovYtO07B5U1vEoVl5GJM7nWNBgr/LVYUh6CkiY0isubdi\nYY7P\r\n=EB5n\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual regression testing\n\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nScreenshots can be updated using the command `npm run screenshot`.\nVisual regression testing can be run using the command `npm run test:visual`.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"22e6c251a4add8157d1e770daf1b9e0a1fbbb720","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest && npm run test:visual","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-22e6c251a4add8157d1e770daf1b9e0a1fbbb720_1537367800577_0.48168641968719683","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-6f834f9f73bc75c46dcf107be9e2009e80f41957":{"name":"rendition","version":"4.27.5-593-visual-regression-6f834f9f73bc75c46dcf107be9e2009e80f41957","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-6f834f9f73bc75c46dcf107be9e2009e80f41957","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"a8623830e797208b57ef545f55ee9450d71d2a0e","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-6f834f9f73bc75c46dcf107be9e2009e80f41957.tgz","fileCount":253,"integrity":"sha512-bHXcwFw4hEQDtNuurXR2BouahXNJz5lCK6Pd9ICDT581o/ICrBHy6fUWAT9EDEUBp8gB8cZl5NBjf0M5WNlUKQ==","signatures":[{"sig":"MEUCIQDINkbBJJSfiHoggu8R56Lb2dhOMaRDLkApug4kHbEe9QIgGCRnjfI0mEZ1v3rZANN3WKgko3h0T0Qk11vdjhJziCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3735021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbongpCRA9TVsSAnZWagAAJmkP/0kcJWsY47dZCULByPBq\nkiCDhFVdJcDV7FF6VN7UdlG4OJsMP8tKI2efL8CcsAEp/2zF25XUWBakArZL\no6E1OI0xd5NMCjDow9iSqoBQ93NQdScCEgzaEnGdH567n3sHGIAa6aY282CM\n27MWjTob19cAE/J5Cr1gUeTMrh6i2MHDgQM6RLXzZ6OdDAnpgpCnYcOYFPLK\nbWV+ZOruLG1b8Z09+ZRDfNVuNhj0C3XY0MOCP3DCSRAmBifT1nGZ6pqzlT/s\na6Ov2M+3kb+aG47mVI1iMAkSplE3h8ldK1dHUp2ZyBkVSzRtk2xYK0WPYEXs\nZpff56ntzRSAx/4WRtp4g/+P3qD/4g1nn4UnBurJeexTXe3QIzM2r5tygNpS\nbsKd3ZulaVlwVowpl7ke8PKawDAHPm2sJUpcsFWhTjnFrKZZXn+FMNZNV20p\n+x4iKFR03U2p5fEc1LDThYeJmlf/9ymB1uefpxzVlmiu69IVlpvvhT2Ne5ZX\nXWR9Xxd+egLZlTB47lO1Iwui+rxg800Ew5RD4xGfmFcxmi7S2Wcqoa8cYWVB\npc6XdD9cItFmgnYbULkz/ib7qqDlx0/pOIGcngAz3Uv97VTpE7zQ3UfOx9ry\nhTeN7f3kfO5dfw2s7yJWsdOm0fhX1BaEv7WRE+WybsDRtnc2xcZq5vhO4Qsz\nxShn\r\n=9pR1\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual regression testing\n\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nScreenshots can be updated using the command `npm run screenshot`.\nVisual regression testing can be run using the command `npm run test:visual`.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"6f834f9f73bc75c46dcf107be9e2009e80f41957","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest && npm run test:visual","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","screenshot":"STORYBOOK_MODE=screenshot rimraf __screenshots__ && storybook-chrome-screenshot -p 6006","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-6f834f9f73bc75c46dcf107be9e2009e80f41957_1537374248746_0.4003394601853538","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-154a255791394d1314f2502b9cb5a35988a4dbfd":{"name":"rendition","version":"4.27.5-593-visual-regression-154a255791394d1314f2502b9cb5a35988a4dbfd","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-154a255791394d1314f2502b9cb5a35988a4dbfd","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"102de5683eb238bed654aad8963be63ed2b2255b","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-154a255791394d1314f2502b9cb5a35988a4dbfd.tgz","fileCount":253,"integrity":"sha512-IEQhrCxfCQnJdPnvDuYl3BMkg6Mv0bUdfdA6MzeSx3Gucn/0L69o8mTeQQpptBG3ZAhlzKoKjTWw35ZH24Jf7w==","signatures":[{"sig":"MEYCIQDExkOW1+zRFGa41mAUxebA11B9+Imrkv0UEjjS+in1xQIhALJzkDWislQRet5wn/JNIPIYVIj3xan/DCRnntw9HC6Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3734995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbonpPCRA9TVsSAnZWagAAE1sQAJYB9rQrXgsGby35WtII\nUcwBinp/M2jgXBHzM3eiorSB1HbRuvMNb1PCv1VAbkmPdRvv/lJYi8LbNglU\nK3GeyhAjE57VZOQbjEuK1sT41IvHkBBw1mGQQJ4G4DiefHzf1ZXts1rhIn3I\n56/5Uu+/bJFZ7rKz/1XJ5t60gGTCRSu3LJwuJZujfmeFpQVEvxEljdZs3bAN\nB/fdyxUPmeDM3PnL8teAGdC1nK+cSa95XDonZsTfeGlwwcVFNuI6bniGFyWN\naihTnqn2Pw7D+CxAdBhac7u/NXuo1YKhwzE5UeIadRPkEFO1sq5c8HvioYaU\nZZYAIrSLB1/AmCcBEG+gyMBFsDjnFJ8O9LtCyGCDzD6XyMOwCpFG00F3f2L/\nNyDoS8wv3fAeefSHP077e6G6bFEr+f04uOWxYzXWGoZqm9w5oiaP+hRUWoz2\ngMKXzWsM6aajPYAbxuzRNdr9ha/TwrnSPG43AqCgsbLpW440u9u5Fle1b26T\nUgagycXjOeSQZvxTvhLwnAtngLS9PIMYQlnqm99ns0jq2WvzRbNf0RtRg1nU\nEwRRnjJQSBT/+98eJ4z9a37nFYrernhVMPEb4VAQ7PkZaRwLRWDbJ/v6IVR+\nqptoo3yfC9iW26rasycOjW+peFSM3DPu3DAB5yAshGYC2brnj+xX8f9ogfEO\npmLT\r\n=Y1NX\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual regression testing\n\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nScreenshots can be updated using the command `npm run screenshot`.\nVisual regression testing can be run using the command `npm run test:visual`.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"154a255791394d1314f2502b9cb5a35988a4dbfd","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest && npm run test:visual","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-154a255791394d1314f2502b9cb5a35988a4dbfd_1537374798622_0.14427064909031606","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-599-form-field-title-7ec3ab5f002c7a39262774ae3676acb9a7aa5b8d":{"name":"rendition","version":"4.27.5-599-form-field-title-7ec3ab5f002c7a39262774ae3676acb9a7aa5b8d","license":"Apache-2.0","_id":"rendition@4.27.5-599-form-field-title-7ec3ab5f002c7a39262774ae3676acb9a7aa5b8d","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"87e4a8f442c817663a80581b6b85c73bafbe55fd","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-599-form-field-title-7ec3ab5f002c7a39262774ae3676acb9a7aa5b8d.tgz","fileCount":129,"integrity":"sha512-23sKaKcWbwLBWF+LTt9wWL5hpxscX+U5pywFriTXhDU89NsgRqS0dEoPyKK1pdFTbKTW7brbqZnz9Jn4BlfEYw==","signatures":[{"sig":"MEUCIGFyVTNxE6vqkI89Ywl5kLKnHHtmq0Tq2NUI9C/DHIa9AiEAqyeAXzo+LXGtnb0/GOUjQJoquBnjZqhvLUdyzNpuhys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbon/ECRA9TVsSAnZWagAAqpkP+gJT2fLZJ4gS1m4q5gPT\n5sspXDnQgzgC5BpgDiRmDEGY4sE763j8Yd1xfU5ONY/a2izI4Z54xujn4VEG\nP1rkBByb39JK2NZuFad5/ZP5N0af2A+lOlD5vYSzL/DpnPOONEhmzcd2pMNu\nhzmPq4oLNqJoDetAgu9Cdqa0At75J2TslcwB2ppf8Pumln+tY/PKmnqIirRE\n5qEWCfX2LTN0Dg17p7WYjRSZlNN7g+QA0qJsk3afbfMB+t76Daqv+UDMUrES\nlpJwW1AXJHw/AOqbdcdm/V2OpTN2iMhgYBv6Skpbkx8NEZ0YWpRdogZIRPaM\ni6htdIYscVoqxy2+US7W64jYEDP9PE5L4YHK5/HAX0N8vDi2XLUcrIk5SJbv\nGPWcBpu95EFi66t0lNnvfPV3qoZ7V+w6Qff2mRx8ld8ITMFe9lTK9oWIsBcv\n/s3TjoO2O4zN2CaeVuAQIB4dba5DmHXVDxrbUsMlDGDCBqRk01qdSPvpGQ8s\nWyO75ni12615tu4OCy4N1THNjmp63tAlcbgf7mMkDpdir3QDq5irkqNLr2IR\nNkPwZ9H0o2HH1XC8vRa0hyhkXhLOwOus+sRpj/Hx1wQQThJt6FcGAOrTktIS\n+ihMP4G9syW5zmRDFZdtXDWGTxCqlT9B0NKo38JTZudcNNnO9kAyO/S8VQ+5\nWWXa\r\n=bRV4\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"7ec3ab5f002c7a39262774ae3676acb9a7aa5b8d","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-599-form-field-title-7ec3ab5f002c7a39262774ae3676acb9a7aa5b8d_1537376195278_0.7094919242474194","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-602-fix-tooltip-crash-8f01e763803787ab49e83495b7ae8763b04c7296":{"name":"rendition","version":"4.27.5-602-fix-tooltip-crash-8f01e763803787ab49e83495b7ae8763b04c7296","license":"Apache-2.0","_id":"rendition@4.27.5-602-fix-tooltip-crash-8f01e763803787ab49e83495b7ae8763b04c7296","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"58f8da060e1e4d6a6f38efe22644983eb0a82c68","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-602-fix-tooltip-crash-8f01e763803787ab49e83495b7ae8763b04c7296.tgz","fileCount":128,"integrity":"sha512-nwH5mz9YMNcsVeepbKx9VHHA2znVIolCmKmVD30JB0mpFuy2VCVN7QqV6hC17uLzCO1SEZijupmohyRP34Lkzw==","signatures":[{"sig":"MEUCIQDzyEvKHIXt1v8kB0WBwJfI/ZVW3r2CQ2GO/ZTsRW02HwIgBAs0cHx5hfkR15zT5ZZsbmMc31oGAuiEFGQ8I0fbvUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbo3A9CRA9TVsSAnZWagAAp9QQAIRNtWGjnFRh/aNuFtXe\nSxwNUmvGiIkoq/QC7w2M75hQgNaeJmBZbh9ZY3igwMQZuu75WqyADVwlymNG\nn49vdArIO4D9wKdte3bMQzMJ7C5iBn6MD5z8o7hXRLzSCJNaX2fFA/TlGcm3\nhT54w/7uZNd2sInhVIi3TmsfV0OjuWXRGoE2EgygdlphZaiJHwutRZJxGHv2\n/yWXhBXNeYdlJCqyrQB5HouHEQEbtg1eNlD/Q4ZL+3eOfdib23/mQzpIac4x\nuAza8IN4LWkFWWqR28E/u/CQvnCmSlNIA0nhJbJDsjIpI3Z08YoirUQ770t8\ngVse2M1AM9p+pBPP2IbOs/wfyeqGfIEGgAkaBtBH580OZw3rPP/I/7iwaGZ0\nYYGRCrVZAHricd38JdELAWnFo8IVguLOybxeOhgJF4Gre+9LCF8dgVIIQ4sc\nSU9HVOVe/J6oG9qyZbbYxD5QkIsubW8LIEF9tTWmFPTLA3DM9AgkK1Bo6Szi\n3EaN4LhtrdKOw9j+FQaQv8JxY4abwBF7SaH2+NEfC0/k0yZ5AEVVxcMMgSsP\nRpHy1XWdFXre8KAdqTSa4Roi+yDC68geRrnzwOyuUmzgPrFH5EInVShqiczW\nUhA2w3pjYPqPG0fDttxWhvfoztHDjtDDpbxOqHAJ98yhDTRl14TSGXw6swIJ\nPn4n\r\n=wIIE\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"8f01e763803787ab49e83495b7ae8763b04c7296","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-602-fix-tooltip-crash-8f01e763803787ab49e83495b7ae8763b04c7296_1537437757027_0.6502965130093266","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-593-visual-regression-1824d8fb0c6419f0e198a778349010bf8c74aa1b":{"name":"rendition","version":"4.27.5-593-visual-regression-1824d8fb0c6419f0e198a778349010bf8c74aa1b","license":"Apache-2.0","_id":"rendition@4.27.5-593-visual-regression-1824d8fb0c6419f0e198a778349010bf8c74aa1b","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4df71997eb7f01622efcea660017de2bad82d090","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-593-visual-regression-1824d8fb0c6419f0e198a778349010bf8c74aa1b.tgz","fileCount":256,"integrity":"sha512-Vq3exnKEdtoGjmBAJDTYNnrGdCMyf3zgdSKfkRVi4LmAFWBGl+9kJ98zpHi+kt4fDD09OmwEskmu+8WBk+gJkQ==","signatures":[{"sig":"MEQCICOjUt7o5B79tU5DT643ruOTdFma9+eP+teL+kltiKv5AiBWjOEWfbDkKm9ZXncb3synGjt//zd9fGTXUR3djLx2Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3257191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbo5udCRA9TVsSAnZWagAAzOgP/i9pxYJe16Q2tKWqQNkr\nVEOdSavFnVVWe8cqvwe0sdsVVYRjn3+9wiWzMDs6WkFcGKB0Mj4CsmQIKP+w\nmUj84AOo9LKHYk62u2+WR/1LlnZvQjVQB6IvcdiG+tReYPQ8/3qbynWYCm3p\nZ2dLnsxCVHd/hcXhx0XEu6I/uSnaN8rly+50Oxa7luuNf/bXKgZr2MeXo1H5\n5mhLYy93+2E5/dpdy1Zym6PTsf0wWA54Eex2l+TIdyulxDPu2G741nZyfvDd\nIWXzqM3OQWDt3wh8si1PZ6uSUamJ37YkNd3hxGFVKJsEZStdmAT0NsCwVDGC\n6jKutnGq9jpr2dL3ZduYJ6jq2vSz5XJ5KnblP4kpyDlcmKGgkCH1f/i5zChG\nkjuT0CgAf7QdFA1v5SOeYUcgorON5GQuqVtIDK8sN+zL3DLn+WLC/ch52HTG\nAk80f5d7nvt9o3qqcqCgHLOL0ngWTXrTy2SVLOj0LiLfy+RXoy0Spji3BFnj\nyJvukT+axgCFYjVf6l8pn+umYIniPQtd982kLC+8nfaAmRPxaNEH4YBtqUwU\ng6cgMr4gNc5XGhQ3WKY3rNBn8ov043iDgFqepYPnz7OgL0aBBbQkyR5HEfII\n86IbA2k/txYh1BY7BZKHDCxdo4QzAVOreZzYy9oF71licClhtOvQmB6ymBHB\nnhBH\r\n=bPkt\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n### Visual testing\n\nVisual testing relies on a consistent execution environment, ensuring that\ncontrol inputs and fonts are always rendered the same way. To ensure this\nhappens both screenshot generation and testing steps are run inside a docker\ncontainer. If you have made changes to a component that will affect the way it\nlooks in a story, screenshots should be recreated using `npm run\ngenerate-screenshots` which will spawn a docker container, generate screenshots\nand copy them back toy your local file system.\nScreenshots of each story are stored in the `__screenshots__` directory. When\nthe test suite runs, new screenshots are created and compared against the\nexisting ones in the `__screenshots__` directory. Any differences will cause the\ntests to fail, as it indicates an unexpected visual change to a component.\nA full report of the visual test can be found at `.reg/report.html`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"1824d8fb0c6419f0e198a778349010bf8c74aa1b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-593-visual-regression-1824d8fb0c6419f0e198a778349010bf8c74aa1b_1537448860194_0.47658034530659177","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.28.0-604-ui-warning-4193e99c7e5112db85ecbb53b971e6aa604a9d64":{"name":"rendition","version":"4.28.0-604-ui-warning-4193e99c7e5112db85ecbb53b971e6aa604a9d64","license":"Apache-2.0","_id":"rendition@4.28.0-604-ui-warning-4193e99c7e5112db85ecbb53b971e6aa604a9d64","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bc38e1b9ada268fd5a03a71d7a5415eca54ba504","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.28.0-604-ui-warning-4193e99c7e5112db85ecbb53b971e6aa604a9d64.tgz","fileCount":129,"integrity":"sha512-lIrngbJJLUcFt/Ljy2SwWQuOCsKQakWTA73e/L/rpO+/wzlSWiUbYJyFRX+lRaDBm0cEEmtgMTSjY6igZ7hrQg==","signatures":[{"sig":"MEYCIQC4gkk8W68ONFI0TKo+ddKztaT3Ba6bkc9bQjfb32oDswIhAJY7UM7ZHSrYn3/G+j1mzEBLno0m3GoGqGTSVscuzDxM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbo8WECRA9TVsSAnZWagAAArcQAKLyhuB06Pto492SOQdq\n/RDq4dfN8tzg5PaHtbYMJdPoWI9q2RTDccoQKfDblJcXCIV7JxY/hfjwcV7a\nwlilLG2Rw4SXYVmHefJmWcaq82nowaj4AOIb71qtDnFK1kBWQQIbJNZRAXmP\n7bASX0giSMjDfGmirk1x1ohi12bkgJTi5JS9VUtWjcfBbHDefe1pW/I0f2JB\nbZbV3rF9kGRtK8eItq5B2Q4BtR5isxblV8LxyfYo5oOgCf6dq0qh6c0mlahN\nenbls60cgMiMkxICJ60kbl0QIif946Qr1CxGkGym5SDxQ9xyOnVPAgLWinly\ntlHj8kmUJX/8r4Pt6toXHq2Wd4fy/hDijuJJ15damPlVoZbimkSZM6pn2+Ea\n7TdRJIeBOgHqTaJYhwbsNesVosDdRjUgxJW+zEnlVwNBsEOpfrj3jUdMwWb2\n1OMiMVroTEC0FcgTy7sOo45gGkR69BMrSVp25sVo+k7FbPXcFZ72c10LXU37\nFjGl/OXufiXV7W3ZSy7x+zyNDnQj4ZxbJ9t0gimbNPlFNJuC2+PaWoXYLJm5\nNP96xgoY4xV35ZQxLXuyNgpvrst0Q6lZawjTlN5n09u07gkPeY5IidID6QSJ\nqAK7xCaIACJ95UnrD6BuLTe4z7+Lx6Al1ggL74yVzm/uNd0cpD/bLMzYwOZ7\nugVg\r\n=ExY8\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"4193e99c7e5112db85ecbb53b971e6aa604a9d64","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.28.0-604-ui-warning-4193e99c7e5112db85ecbb53b971e6aa604a9d64_1537459587926_0.6703671142768561","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-598-compile-readme-4841474530c0f59346c37d8d1aae2b6192a310ec":{"name":"rendition","version":"4.27.5-598-compile-readme-4841474530c0f59346c37d8d1aae2b6192a310ec","license":"Apache-2.0","_id":"rendition@4.27.5-598-compile-readme-4841474530c0f59346c37d8d1aae2b6192a310ec","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cb8386832ea5e8f4912f1c7118b3974672cc6d55","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-598-compile-readme-4841474530c0f59346c37d8d1aae2b6192a310ec.tgz","fileCount":130,"integrity":"sha512-9OpVo2tG6dqDE2rpLQYN4QsLKJxOJ9wrriyUfS6bd5MS2SelJgPAGruXUtEXP4bEYyvRQPwqtdBUjG/tiNMnOQ==","signatures":[{"sig":"MEUCIEzvPepmiwU3se92CXSKK5hx0q4NOrQqPDZHS3ksc8HSAiEAnXyJZn/4nkdZBCEc6MINXcpz7mp8FAk+OZc7LpGU4hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbo9B7CRA9TVsSAnZWagAAYocP/A1FtQdEAJwuKQz8Scuz\nVwoQlfSYxhpT3vxumK1+zoLsF1MiFl/9Coe0F3UMsKK+4jSfjoHV6mr9MDx2\nyJ8DzkZJBzm6iOixM3wUrL8Z5qr+w0wYR9g/VL0gckNmWjr1pl2Jl5eSVRxW\nZOt/1CpW8HtX9wp6VVXQQMLDl4q/D77T2SQM/3yQ1m8+d5sRoOLG/pXWZHnM\nboQxy6txxBRACeueL8+l+xufgBXH120UimpdWXbkM26hz5chkHHuPPbAet05\n3Omy1d6xeNIT4u9zFByp+FggkipMNPrkTSCNDMkwKkhGRHYJUyFU1pxyzrf6\ntM9DXou8c6QpTL1kx49lDNeVDQUdrq4MnPkoPEZzNQYZ4qVoOhaJ4/XGINf0\noAxc6VKjqWEdRLlxzhtGml7PFiW8u1ABD0dlUlHAaLgymTsxxrBa7NTTbfu2\nkpQH8i3OJsxAxib0UodSAyvFx7KKHuf2qVDR/IDDGAhSKOThA2tLcAPmCpYV\nP5N+9CQon+l+rPzaBJDGWr5qgx9GHMWEzPOWnqXgAJhk2ApzflLtyNjxG993\nDP8yha/1Ddo9PFKIy+DzBdDEEoksVD6P42e1xj95G/nY0glHbnRismYnkv62\nhiI8vYdR+uCgy4LE6DBzSVr93b+empx/9hVTzynZ5INffImzbsSD6IiLXv69\n/pGR\r\n=bq/N\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| -------------------------------------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| -------------------------------------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"4841474530c0f59346c37d8d1aae2b6192a310ec","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-598-compile-readme-4841474530c0f59346c37d8d1aae2b6192a310ec_1537462394707_0.696396022590476","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-602-fix-tooltip-crash-938b4746a33dc345f037ac3a3a44d1da7f5be106":{"name":"rendition","version":"4.27.5-602-fix-tooltip-crash-938b4746a33dc345f037ac3a3a44d1da7f5be106","license":"Apache-2.0","_id":"rendition@4.27.5-602-fix-tooltip-crash-938b4746a33dc345f037ac3a3a44d1da7f5be106","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"512178578fce34ba35a32827a9fc08b4ee309c00","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-602-fix-tooltip-crash-938b4746a33dc345f037ac3a3a44d1da7f5be106.tgz","fileCount":128,"integrity":"sha512-YWU4RowbY9ff2ZNZCkggU0PpbjDQDhsiCscXt7ffQ2JHYf8ay/0pJr9vFvuKbI45sYMmKhfM7kMm0vE7UXgizQ==","signatures":[{"sig":"MEUCIQC2RVXhEky2gDfF5YdUpKVsUXcPRuhL9NH35iIKAw+4cgIgfjCiDtMAYK8To7lf7noyssETIwtozMY27c8qO0/nYP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":496822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpJgmCRA9TVsSAnZWagAAR1EP/0KgvrGNLMVqQRgA6GZ6\nLXDp+yiuAiwnhxTtOQojukqlUzoSmC8DrQmCKU2LIxfcoAktxNlkaNkbZgOB\nVWBtSB0t5yb5+eobGxXMFINglI1dg6h3GPVNuk4b/JW6ag6M8vpDk9l+ow+k\nZIN3VhtNG1GC9cSAEaxsarSL3q22yv+L82AOg+OYjfQ9po+5lJ6QCZbiEmww\nOXvzYNJQFLZBUUtZ94xIZP7YIr9zxlta70EUtp2oE6EsPJF6ZkcjjE/afEP7\nOAljThkjVj8sWut+srQQpYJMqJjvnclq9JH2OroELywYPNi/6o673hBe+ZCr\nJzZejcz8Sxs23q8L9qa6c1CCsJg1SFKhLUJKUh/g5/gcbRaagWrV5r2FrVbf\nmX5vr3CzpwMngrai7oKIYQ8G0jkdqz5QoNgJ6sV1to+eom9DIjIXYCT3hcsV\nJ6iqejjU8Ynq+mfXlii6DU7BonLhTK3NzdFwgkMKeVEqeGJJkviLTW6Q/Tis\nGRIyjKQ5YVaaC36RrQW/QzTbJihFCDpBvkpi81vJ0nBh2bvf02urTdNCrgg0\nkM0CWGW5L3RHXEn1A1GQXP1xZgc9MRBF+WfA5OUGbgQjsrw0zLu+P0jEai1m\nOD57qSBUNYzhb8rAX42eMGNsSbmYl3kev1rT8KrWKyXq8aFA8IUMqwWT8czB\nRXQM\r\n=PkQA\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"938b4746a33dc345f037ac3a3a44d1da7f5be106","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-602-fix-tooltip-crash-938b4746a33dc345f037ac3a3a44d1da7f5be106_1537513509358_0.5461332230570639","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5-598-compile-readme-98cf77b962604fc6bb7e755d6413c6f2d172adb9":{"name":"rendition","version":"4.27.5-598-compile-readme-98cf77b962604fc6bb7e755d6413c6f2d172adb9","license":"Apache-2.0","_id":"rendition@4.27.5-598-compile-readme-98cf77b962604fc6bb7e755d6413c6f2d172adb9","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d1ab55847a2675693603532911a729325b385f41","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5-598-compile-readme-98cf77b962604fc6bb7e755d6413c6f2d172adb9.tgz","fileCount":130,"integrity":"sha512-of0SBhjgA91Fo7JkX9uBr39z3FtGYF0+zsaKcLr3TDiRov2twRQDd5ydtTxNI7ojFrfxPl0x0jlL4rWeblVfog==","signatures":[{"sig":"MEUCIQCZT+zeDxdArXelFzwZPWLkH4Qaf31OqrIIn9k5j7V7yAIgCrnth2jmCdlkizGZaH6za9AMUp8bn+1qeRYBaJjzo+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpK+yCRA9TVsSAnZWagAAYE0P/jvMFY9/hW95PbnVXFMT\nEWZtziYvP3dG6+63Dt1sqTbqT5zJrQVuYp4tnAg3Nq6/s/Cl8dKQzAelLxHL\nISnlc+KMtim2CITHyigbWpzHoc9cmwAlk/HFelpWxjWYeRt49nDbQDNITh8u\nNuRfCWLAfKkgJQ1PQvT6UxzJu3YY/6vOqcwuH/A7OOcUe2Un6UCyFRXHqeX9\n3kRrtDv7pxskyVX+dVKCJ8wrJHyNMoFGDeQJP+r9avq8ATIfc+a8eVHM+6SL\nD0Teeg2b2qgzp/cBaxX3G0sFpGUqARjs6fSx+oED1a4Cq/RjZ1x0k4TIRV6B\n69QE1+ovjUTQEF0t+JIO8V88aqox+Omh2RnZvKUHkatcKe1L0+C6ikCK4Zl0\naeVqBPttRUNOc6T0NN6xDwDcRvXcUvEratWlQ50H4k5G6GRQuQcq3sYb78d0\nTS72GCD3mEAk4ANh1O4j2TzGxL3+ju9pA3bGO8Uy1eICaV6LQb1Nh0BEO8NC\n9aQ4Ve8KYRQTwAcFCL8pifOb+TYDUmc+WSfygRt/tE6POCOiPVUUq76cEYdU\nEDHp6oJXB27zal6z31LYM8dIFLlRdi3vvPirWlYxag6DVjESF59G9RcHflGn\nbDsnWt8B6mHDoLsA26QBQtI2jUaMtLVkd5HsptmhRpV55O/Zw+WkUMNTt8+e\n4bpN\r\n=ieek\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| -------------------------------------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| -------------------------------------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"98cf77b962604fc6bb7e755d6413c6f2d172adb9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5-598-compile-readme-98cf77b962604fc6bb7e755d6413c6f2d172adb9_1537519538182_0.6626863555648299","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.5":{"name":"rendition","version":"4.27.5","license":"Apache-2.0","_id":"rendition@4.27.5","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"7fee74ba8b5dc3b4971ce630a1b761e0fceb0b32","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.5.tgz","fileCount":130,"integrity":"sha512-AcsKJZhqWLJ+4Y/byhps6MPZg45uQ+sVOCRNpjy5diWuef/McKeMbQJEzC5qoWRqQb2jz+l53AXcrOVcCvVv9g==","signatures":[{"sig":"MEQCIE209n+8YaB1f85i2GwGwR8eaapmsX6CcvEGlggELAS8AiAMAkkU1g5j3u+o52CfEBBJ72hr+QxTHvs2DoXOiI1DYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbplCpCRA9TVsSAnZWagAA9SUP/iO6QYunzA9VBSwUJv0R\njvtlEausww2j6Ik3ZkYIGwA8LF+vOwa4Rt/ewUMNR21ygcg73PVfTAcTSsdI\nii90I+V0kEtA/4217AVh5OW3pmpJO/jGU4Sw7yOfSZCx+g8JRhLe4vdbmTE/\nfMum8imnwsEgOAetjzv3wOEytk+Fp/kritf0zSunygUwxi3leUr/V/Vk3s6r\nOye3OA8sqY1qP6owZhE5ADVjNwOczmpqOS8NVzg9b9vNHzBjqQ+86EkaO/Gg\neYgnqjDVyqyyoxItLCzq9TY8rRS43hN75CvdAPB3iXov0wqwOAgp2rL5P82U\nQwMb/mahnanyWVAoQ7tfTUtfgqe1gS7jDCiZIjKiVzEvjbg43tWbEY1miSDA\nA49v2j83SsgHrkHjfAAZ0y2Jt3iisp4nIV2plo5FKscx8luk/CX+b0GCruH7\noN3dKQtBarQDKlmErdRb7hTf/lSkGrt5d72gRru4rM04P9Sgp/4wwqQ80V4Y\nafHyrSD3Ylz0aspgi8sbiIpwm8IN7CTfYJ+ldaM7o/3bpd00aUwAF/pLUO1I\n/2eFGl96EhwmzabS37oIWAOqpQXXVI+alAqXeDcJJTQQFnDyMuMjP+EZy4BL\nNa4TsvkMS8ChecNJ6GDhj4y/NsXWhlCnqm6+oyHdhl891WHunREtw4meYdJN\ntBCM\r\n=SKQp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"ba2e5d667a4845f0d2640a4df62546d7cf7f6794","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.5_1537626280679_0.8440786772022388","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.6-609-readme-tables-c3c116c487a5ff46a4e0b4a7ef002241d20df02e":{"name":"rendition","version":"4.27.6-609-readme-tables-c3c116c487a5ff46a4e0b4a7ef002241d20df02e","license":"Apache-2.0","_id":"rendition@4.27.6-609-readme-tables-c3c116c487a5ff46a4e0b4a7ef002241d20df02e","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c41ca45e054c2591e7eb9b1167de34178159712e","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.6-609-readme-tables-c3c116c487a5ff46a4e0b4a7ef002241d20df02e.tgz","fileCount":130,"integrity":"sha512-UG5oWtC10TDZDjmQftrop6Smb0JAV7q+R36pPYz/uCJAjb5qKrhC5Qjrz18Z8qGrxf7WJESGmxfuVI4GF1uZ+A==","signatures":[{"sig":"MEQCICfE/QCU8z67A0cof/pk2CM9a+yd1Grr4tzP28v+A5bdAiB+AwC2wo0d6KZV5YqEOX2Fgzz/l7eC2ue5hulhc4Gh9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqKoRCRA9TVsSAnZWagAAazYQAKER4Z7eCu5i7ZO2Dzqv\n4LWSCu11ZXGJU6USA93kAlJN6dzqEwL3KtKCb9sFAy/tNMduNG9yleSo2sME\no29iV/2KiQoPmyzu/+Ox9/tE22uIJs60rKpoJb6/BXTwzWlfJ6Nl0XCKN5k9\ngaaAfWDOHnW0BBoCCFc54TbaOCEr7AtDayvW1Gyv/37cIOukj7aKqqnq67uc\nYJZWy1HFIJD4Gh/NiRQDjzS8VvN9+ZEOqRKkkbhkMmX4GimbABrQALwihhXn\nAaj5JXTT/0lq2qX+uBnKiHZAk09uo7byXxYC5+D7dcK+vd7OA+DKHL73K62N\nJIj2ReDH7CNIX25vCGixRqHGetTMJYoCLs7hERYhMZiNN02lyZ2WGUaqxpAZ\njf5dkEJFwd6Md0JgocCCKOrXYOjDhDgvXhXP5ZlDM00YWq7DdA2qBeKC+99Q\nZKl8r2+e9xsPMtD+bq9g3175EVgNg4m2lNTsnKx7g4Ag49ehPLe4mNj6H6eq\nIDjayYedg/f9DYVF0/snbH4g6DM88Koboqnp0x8lPCjJdPi3uUT+lq7WCZXB\n/05sIsV6azID0187odMCJ4CXnu/szYrG8VlhvfZ+8m/YYYjQNud23lxMD/d9\n1S0KVGLK706mOlTt8kdOcLVzQ948KIO2fDYPmE3+s0f/eG2NZJvo7bydbd+f\negjN\r\n=d5yz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"c3c116c487a5ff46a4e0b4a7ef002241d20df02e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.6-609-readme-tables-c3c116c487a5ff46a4e0b4a7ef002241d20df02e_1537780241136_0.01117719404079831","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.6-610-audit-update-58af3758574fea669ce71d819d842fd47c4d0419":{"name":"rendition","version":"4.27.6-610-audit-update-58af3758574fea669ce71d819d842fd47c4d0419","license":"Apache-2.0","_id":"rendition@4.27.6-610-audit-update-58af3758574fea669ce71d819d842fd47c4d0419","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"78fa54002ce99b9819903436bb68db11a14ffe90","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.6-610-audit-update-58af3758574fea669ce71d819d842fd47c4d0419.tgz","fileCount":130,"integrity":"sha512-R0HVANpArnFKaq9E0cvR+tasT3A7KZve9u5VfgFj9uGotH1/Eb5NabI3/IpECSeWpZVTSaZHDYCR+svpoaMfJA==","signatures":[{"sig":"MEUCIQCUk558jYvAzyURMd7W4onp8FlcozlORlGV54GqB2jBkAIgXZ1y6U92kcKsc4L5vik/nVWEnjCMDxmWPvasIXzpbyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqLJzCRA9TVsSAnZWagAA6dcP/igiTimkqMJE3fEFzaxq\nQwqdBvdU5NUNf4ZiRGHvc/Tb6wVpXLiRsigLWJ/C0GPYV8p6nbRDj4gL1mNP\np1NJ7j5+G9cY5LwA8o4vTkLuZJRkgyiBys6TdYXQB5RD/3O2ZYYU2I9YF7+O\nPruWk7N0SEsn8G10w62UYP7UCj8SUGP45aIC254H61BmhTx4Dn9yYDddiBTc\nt6btU2mYByjxeymjIF6GrLkWLZBr9XG9DAzoZXmaPiehu/vnFKerHcsI+TEY\n3i7p4K6d68IK+Kfb7oDUCbO4JJl6XS4MIJtKknST3o7I+UF0uHRgsQ86947k\nwFb1Ndp7MAes9bfSC6IX9iif4LXu1C5Q6wKD2D9UrPpvhH9s9AfZuLdGpp51\nNw/bbJlDpCiEI09sM6I5aQdmAKfMxKNTtZM8V/fyil2NqPbWedzAH4uZXC25\nlMmAYnp0hl/KvK7S33w+6OBccYxhzqLRkBknPvQnQJZKpTdqH642RoExbdWV\nJK2kTxjtPofL2G0YpteUIAJKhfVctUZRgKaqm6b5ZoVq7HRbohzyzQQqz9jw\namFdmTituoDLo6B064/WimzIXToA/SJROKQ+8zkSrJSO5oh8mDze9E/XxPBy\nzkz/gd1kn3x2ogGx9D6RGLH20oBQJgVuYtAAT/WZ+0DSMIkenURu5dooaFFR\noSxV\r\n=vpoz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| -------------------------------------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| -------------------------------------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------------------------------------------------------------------------------------------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| -------------------------------------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------------------------------------------------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"58af3758574fea669ce71d819d842fd47c4d0419","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.6-610-audit-update-58af3758574fea669ce71d819d842fd47c4d0419_1537782387086_0.7636992260315874","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.6-609-readme-tables-e9d315af7e0450b80cb5cb5d05d043e8d36a22dc":{"name":"rendition","version":"4.27.6-609-readme-tables-e9d315af7e0450b80cb5cb5d05d043e8d36a22dc","license":"Apache-2.0","_id":"rendition@4.27.6-609-readme-tables-e9d315af7e0450b80cb5cb5d05d043e8d36a22dc","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2272196481edaeb8ad29d9469f76a8736f62dd32","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.6-609-readme-tables-e9d315af7e0450b80cb5cb5d05d043e8d36a22dc.tgz","fileCount":130,"integrity":"sha512-dgXFwwpJHCg+oTgRCqfj7R1Cn0Yigp47K2393FRYdJIcwOZNHTzUuLYfdArzpdEBytNI3EtSA+DLp2EbxWna1Q==","signatures":[{"sig":"MEYCIQC3UuF0C4zH4CbE31PdwMHXNZMD8Nc1CSPd0Wx/9aUscAIhAK3AmV/z0cYbzgN45CXM1MesP/c26iV8viifJlIkVhFS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqLKSCRA9TVsSAnZWagAAMYEP/09Re+jjmqy2bfD/07XR\n37x6Xq+qcAixck3rLHNZM6B28Q72v1DOKSFmftGl2DbKl7jIyFXTQ6E3VR6C\nPU4hQVXD08UmwHgzX5hWn8TMacj9qFLhI+vxTkiGtnLxhCYOMAN/qk/zRqh3\nNkFLqiNcSDvVwETkpGKrPVDdEnGVzxvJG2zTlU5eA5+U8nkdYRxdFY7UNFdG\nA/FBMhsPy0OxkVvQgxurcSAJvImUP48FERGtO6PIztK0msOwBjPm6gxHeJYq\nPNi5CJfVX4DC+iR3BHgwXoo3DJFFnWL3RQo9QHNmz4HCW/YGS6kOweXM1en1\nWESVjfRV6Bx85fVVjkYx6u4uu0g1l7yezBOVaSTX+jVPPSanWxO3AdCjftp1\nc/YTFaxvz/nAzHMg9Oet07ZxfC9WROIHc5DpQP+TaBeEhoWyOe/q9flCy5h5\ngdNaunL1Flx7IO7I70/F+rx4d95o2vNpmPXo9HsAiKdmJ+98p+kLcyjZ80IH\nxZ5CG5rzXWXeEeg3lKVsl4c1TvwdhcAgWJQavdvZbRzrgcXVVlKcqrp1pqcc\nOeiEW5nJc2gYBOCF766wACyCGo60nWQe0zvYnk3Tjq7p9cw8RL+A2yoKWT9S\nd+JFfVfW/D63TKav00wQFpCFwnq8f7BHMUL8bZUfGD8hWQIKh7Se12c80MS8\nR6D2\r\n=zDKz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e9d315af7e0450b80cb5cb5d05d043e8d36a22dc","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.6-609-readme-tables-e9d315af7e0450b80cb5cb5d05d043e8d36a22dc_1537782417622_0.5348405224528752","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.6":{"name":"rendition","version":"4.27.6","license":"Apache-2.0","_id":"rendition@4.27.6","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"21cf4c43663156bad50cd48082aa10bdfcf3dbe2","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.6.tgz","fileCount":130,"integrity":"sha512-9GHPH55n7fnNASMqpUG0Vbd1WTlkEW/CoATV4OjKyuqTUFXVipjMjIS7Fsg5okJxxXv+o16suYkox2UTIVE+8A==","signatures":[{"sig":"MEQCIGpCCtaMHAiBdb67P9dgbZE3qJk/mLKRBATqfFgGxg/fAiBPwvkiGF4ekmJeWQp7GvZUQDMB4awKFgD+QUDbCWakkg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqLmxCRA9TVsSAnZWagAASLsP+wTL+qLG/7ZM63YF4q4h\nJlbTbQv22dVUfXdywxg5t/PYbpSOMaiPQVAFLDdeNGv6wZCngO7n8lt+1hKg\nfHoHxp4kEbDNwVsLqcg6t/w7hJgOltOcB05f1AgIFxDvKOCHRQwN342A1rMh\nUohjLi+D0ijz1LjuVqhKnq2bBD/MKWYrKKY7ySwro46+QkIZKlu5GPy0+adx\nMfODGUxGOUiB4odOgTD/x1Tvp+iIA+0AD/pYI8EWqS0bq0GCTzA/HQWOY1CQ\nnFccypQZT0dJqnda9XyNT5J9Bq2gaImeYuVO25VrQYwtIrBBOCA7tHvOuUgy\nnXDICaHMhf3mUZDgNszrgC05EysSnP9CQW+Trxfdscf/X8iBHSijGtFoUFyM\nq21y/9i98cvFl+Je614VDXEesB62dM5ZfQEvrRJOXzJz/7awiPUfeowDMJ6+\nIvU2kgUKlNrs9h4eEJKfb482ZqTMttI6O2a4TTSA4WbaEIXXRK1viXhuzxwM\nufq5Oa6R5FX841pyg25OMTyq3GEa2Y1sabZwBpuJgb0w4G/bvShafBnowLpw\nIjonWZlPHhxHL5MXrJSixM+ggZtQBKgZBzcGMYfqEnu7d+zcYydlMYvKwSRg\nKWCHXkJnRM+t1AN1sivhBr3XIUrpwVA6f+WJeucYXo9YvK5PXwgOd+2zuJYX\n/591\r\n=LCFU\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"d92b1ab7f69250ba969a4aac01de1362595d21de","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.6_1537784240083_0.8330499778284868","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.28.0-604-ui-warning-4b1e538ddf97602cceb2bbda15606e7ab4dcfc40":{"name":"rendition","version":"4.28.0-604-ui-warning-4b1e538ddf97602cceb2bbda15606e7ab4dcfc40","license":"Apache-2.0","_id":"rendition@4.28.0-604-ui-warning-4b1e538ddf97602cceb2bbda15606e7ab4dcfc40","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ef346fb30d8e038b31ace56bcd6e0313baa64d91","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.28.0-604-ui-warning-4b1e538ddf97602cceb2bbda15606e7ab4dcfc40.tgz","fileCount":129,"integrity":"sha512-baH2YK/JwwUdat9ajD4B7jpVmmNaRV1vrQQSSHazhsEnO5fTHkxvIxOxnpKDeQ5CFgQrSTx1Ei929udSFBKL5g==","signatures":[{"sig":"MEYCIQCVzsb/kEr+/xi5+wXQR7qYyOufpk+Le6OBL2vot45EigIhAOKcmZiaDqxi3K61Ozmn7njYConWJY06Kre6kMshFf5+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqLtXCRA9TVsSAnZWagAAB10P/3a2Acq22TZfb+8bAtdC\ncuVxVJofiageafyyAyV1GaExJAS7hTUecA3rNl1MoGq8DRnXG0EVA7qRApOw\nXSRcE2B1tQn+hEXI2Ai1wS0vn2qhwVY8Q3trpGk4+G58g4l4X2kW4uzCdNKD\nioZhX0WGH5ES7YrdBwGtU0ynlsHElNeDclpX7Ag/tQ0xOc4t0ZfrlUqvI+vN\ntf5iGvCUe/llwfJpnEYOOjh4LdBtqhln77PWYG1YyXhZNDA4cVXBoWNFhF9H\neH2wEgWMXzIPzvvG05yE1eZUtsVe6Tg0XiPpx/YqEEtUmb3iqsQlyNs584cl\nQR0ORN2UW47Vhzm2F0yo6CxBSvt/7/SCVCRtKHRM3DdgEcT5YBjz/cuXd0qQ\nCu+yhWU6AVzDnkjlRxn2p2KqkmmQjPEck6crMrk2okWhLoB3HNaX4el1ejEt\nESOCtCUCD/q/cuAEE3a68C3nq1pitEKYdSMdppqr/ljAea6r7L2fGzx8e0S0\nm8H2WpAwwRAIbn8ijcya8k62K8RrIJHrIkfAn6nVZekZ9PB7Fypy5/Flm/DT\nGfWBsM9MlqWrfaNFTExeLh2Ae619qt4Ml1DYYvHpoyvVa3QU77mUbao9Mtr5\nRYrR7mRIw+KIw2VTEpCU+sbh2iFQC4vjk9Yt6nybdNm4ltBn87omcTJpuUqJ\nIFV/\r\n=gw11\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n### Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\nEach component has its own README file that can be seen at the bottom of it's page.\n\n#### Core\n\n- [Alert](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FAlert)\n- [Badge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadge)\n- [BadgeSelect](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBadgeSelect)\n- [Banner](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBanner)\n- [Button](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FButton)\n- [Box](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FBox)\n- [Card](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCard)\n- [CodeWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FCodeWithCopy)\n- [Container](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FContainer)\n- [Divider](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDivider)\n- [DropDownButton](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FDropDownButtons)\n- [Filters](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFilters)\n- [Fixed](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFixed)\n- [Flex](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FFlex)\n- [Gauge](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FGauge)\n- [Img](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FImg)\n- [Input](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FInput)\n- [Modal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FModal)\n- [NavBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FNavBar)\n- [Pill](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FPill)\n- [ProgressBar](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FProgessBar)\n- [Search](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSearch)\n- [Select](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FSelect)\n- [Table](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTable)\n- [Terminal](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTerminal)\n- [TextWithCopy](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextWithCopy)\n- [Textarea](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTextarea)\n- [Tooltip](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTooltip)\n\n#### Typography\n\n- [Heading](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FHeading)\n- [Link](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FLink)\n- [Txt](https://resin-io-modules.github.io/rendition/?selectedKind=Core%2FTxt)\n\n#### Beta\n\n- [Form](https://resin-io-modules.github.io/rendition/?selectedKind=Beta%2FForm)\n\n#### Extra\n\n- [Markdown](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMarkdown)\n- [Mermaid](https://resin-io-modules.github.io/rendition/?selectedKind=Extra%2FMermaid)\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Developing\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm run storybook\n```\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"4b1e538ddf97602cceb2bbda15606e7ab4dcfc40","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.2","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^22.4.0","ts-node":"^3.3.0","gh-pages":"1.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^22.1.4","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.0.2","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.28.0-604-ui-warning-4b1e538ddf97602cceb2bbda15606e7ab4dcfc40_1537784662918_0.37777515524704586","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.7-610-audit-update-8d58412c9909b217a96f17998c793e89029f1b37":{"name":"rendition","version":"4.27.7-610-audit-update-8d58412c9909b217a96f17998c793e89029f1b37","license":"Apache-2.0","_id":"rendition@4.27.7-610-audit-update-8d58412c9909b217a96f17998c793e89029f1b37","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"9654a865f85707b78a95cea8b945f134a5008be0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.7-610-audit-update-8d58412c9909b217a96f17998c793e89029f1b37.tgz","fileCount":130,"integrity":"sha512-ZWkKoffOVTlMNrc/tvHDhwhrTRFJurMduUmNg3lfWmapKPpxdEu9kwVpKVte3l1y1vFOQB0iDxfORmK81oNlGQ==","signatures":[{"sig":"MEUCIQC8Yr8a62Wh4LNn8c9ZkZWXBh8kfybUYiB5B3uJbZBIQgIgeSZgx3Qm8nbYvPjdMKP+ZXJWhE2ZqakSXao2XVWmkvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqLxMCRA9TVsSAnZWagAAK4gP/AgMg6CD7yQ/EQ2NJ9Vl\nlKyEqi7+YrTOShIU9msbG6QDhK0e0rGnv+EKNtoHwmy2c/e7c2rVmeiE7TkS\nNMNqUSklT/XbmHzwbbbAWUF+wbjrpQE8WOg+UVEM4FpXW1+9KpMFvHTfRXFm\ndyBgvZs6tkDCWWYk0JRxcFM3Zgb7H45U52rCznw75JKSBcaAnDKIy+Gl+7Yj\nH7hlQn1gNAonqPNras+MgWY1CA3bPGHn66txibUzuH/p/BxBhVhUy3GGnQqF\n3DKA6vEUcHiongvr1MabqElA5WZaVgBU8RtYmUaiV3X35w/ELzneIaNxJdVq\n3HEV6s+UOhsAvF4ZP61A3CQJcFlKFL19EociIEEhKeJDk/Ll18DCQ/s06quW\nvvLr8Mmj0c9aQa1il1xpZQIvvTSt+PvsslxxiFpoptBQ57VevuGwsJAxPRJD\njxJTMao/E3s0pngK9vZj5Q6tE2aCyMglI5DGydDygGQaCYb+JRrnE3LMvI7c\ndBvDcx6O2cNUf+YMqmJlKmmH4qLQ3q32BeInzmRPDY4i4B9mbPHkOJBTOahg\nRPNF730hjc19inPpiXkFUsrMsdWqc1QJdGlkC8hI731aPAG0YvmTl14BWGz8\n5W43mIbDt7QLil9b3bYaP+SQrVHSZMmZAgePOhJq8lgHAZo9OtJ4taZmLs/4\nXgFk\r\n=t0GB\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"8d58412c9909b217a96f17998c793e89029f1b37","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.7-610-audit-update-8d58412c9909b217a96f17998c793e89029f1b37_1537784907605_0.08517123901559498","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.7":{"name":"rendition","version":"4.27.7","license":"Apache-2.0","_id":"rendition@4.27.7","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"67210af3c095627c08150614c72d743dc33983e3","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.7.tgz","fileCount":130,"integrity":"sha512-EXVDelLaJsJ0ERtBOJz3J0scosu37MyvZgjYrZiawy8Z9fCtoSY5B8QZtRsQskJEeZmNcKKQQruv/j2W/4V24g==","signatures":[{"sig":"MEQCIAfRddYc78pj+7n0yRQR0eMhxRQ8Ph0KNtvP7I3CJSDvAiAD8m0vWAGTK5WQ34Yk/gdAdQkpgakMhKttSsmKaj5ioA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546171,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqMKfCRA9TVsSAnZWagAAR78P/iNESuDuTa/IRYN87tgf\nxaSUER0Ku1dKJdpLOBA6/o6/bC4ePJX5x2ln4iOOgN4xMfBK2EUSLnm6CM5h\n8M+c3wVdcUvtJ35eIBssfNnc5NX1RUPPLoVaU0Xisa6NgAp8jT9YDjTCgnsZ\nvJ3ZB++0Q4F6Hp+Wb4qob9r/nv+0/TjZ3N5bguTvlpc/dthXZRDhk60090Nz\nwHuOzkBm3k3yLXHlijapE29xN35ryeiGyqvgFABlxXV2jeOgkHPEQDBxpkmZ\nHRD01KkDW/uecAdSZSnaW91KB31N86VxU5YZsBsY/rlvZcSxdyn/JKxT5dhE\n8QvrMaZcqFrhaq2w22WKGo393N1joGWtVFWtF1N0RjyIO15GqO6X6+IzHa5p\n2Uqmf8bmZKr26fnlhdarpdQGzY6fKX3uV6ZIaSjUMAwCyiKysgAZH5YML3mw\nRDskhUwDH3Degy4TyCuRm8OYZx57YhRE7+LMGbVsNZcgLaohbLtF1t1pmhcF\nwEAwDV6q6x83ME7FM99eo3dsTDFWpvylzDM9Pxz6LtlrQHW1umjeqqjv8Ilh\n7sfGDZZdbzLcCW/6LCzUMv+CUyV23ZRgAxUTSAtt6k6wRwh1GBntM71GoD1d\nebn2GFcOT64FdamPiy9i+fJsRmFMd4atVyU8Johv9SXX0OWvB/3sI+dL7PrR\nCjIx\r\n=/SuC\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"a06ecf6903bd8967c2ce2e4030fff36e8e613d5b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.7_1537786526173_0.5027554137322834","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.8-589-table-data-1fb542782a03941157823d1b9b0fe3a3ba7d3733":{"name":"rendition","version":"4.27.8-589-table-data-1fb542782a03941157823d1b9b0fe3a3ba7d3733","license":"Apache-2.0","_id":"rendition@4.27.8-589-table-data-1fb542782a03941157823d1b9b0fe3a3ba7d3733","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"159b71f4f656d89607ec03b5b1bf561b24bca542","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.8-589-table-data-1fb542782a03941157823d1b9b0fe3a3ba7d3733.tgz","fileCount":130,"integrity":"sha512-le1yywa3GKMqAvKjZ62J3d4lTvg2yD1vqMD5fkUntkMuHwLXtv/+r5aDUDCOPo8nKJ3Vwzzzwu718Q4Dommgxg==","signatures":[{"sig":"MEQCIFtTOczWR2nJct5Bq1wIbsu0hOhL5ITZLlF1prKvBvH2AiBth7wUdFa+w86a3Oc1FGIIvMXlRmpjOBivQiE4YMdEIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqMYDCRA9TVsSAnZWagAA0OQQAJclUkZudrDQHd25tni/\nO+iVLUEV8Y2XbNiytKfN8zBMfngpEJ46jZmLgO4k55iVQ3yCyaJPTPTj5w8F\nuDtKkrcsCeBmmwcACWSZ2Qnb6ar/oNxRyxiK0kdx418CMU4F+kzEwed1Th2v\ntD/qina+ST7vyrE6g3gp2ia2Q07yJSTdSi/CYFdxmzz+8DgbEgj/2ZnBozsF\nHe/gYMhfVhEF9+vPjIrV7wX8xbGGtsMZE9CgEaeOexHji7/vB1YzfZ3PzJEx\nhWaEA81FK729gw5syiPflaRAzuzChnQQsDQRZkwKk5t309V4daQQT0QVV9Hy\n9ew1vql2UNcnwt3XseMN1Aycqj6TtEBElQic5LDvMQgAgI2N+ea8DSgBEZSB\nJxxQDBUP0a+yJkCfWauEORxyr4Bg4wIqUvNWmGLrBs8PjkkSiup7ifSpd+q8\nQ8Qgqr2ffIoDIDok3m9Nl8eTWWVLUYfb2E/lZY89vt0bTI7b6BSPNLzNn9TY\nHMW9YibuBBS+FGTUNKyOV1d5JksbMIJnG9C0e3/v+re+eB/ezQK+mZ9v8SPG\nyvrqJcVtBnGOd8kengRWJlM+kncpQ5xnc40SLlTRjMnBkPLl8BHb5bezhXCE\nbAXtbyiLmlOrtZmVBTuGVJ9rAlp7LePN7GUOZfkHGzVsTy/m6MCpcYc6W4zf\nvK4t\r\n=cjSO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"1fb542782a03941157823d1b9b0fe3a3ba7d3733","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.8-589-table-data-1fb542782a03941157823d1b9b0fe3a3ba7d3733_1537787394556_0.8259001474243024","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.27.8-589-table-data-7b8d62965dc1299c2d4f89bec45092595df3b8e9":{"name":"rendition","version":"4.27.8-589-table-data-7b8d62965dc1299c2d4f89bec45092595df3b8e9","license":"Apache-2.0","_id":"rendition@4.27.8-589-table-data-7b8d62965dc1299c2d4f89bec45092595df3b8e9","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"84512999c8a605df8e8822aab1f19cae0191a1b7","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.27.8-589-table-data-7b8d62965dc1299c2d4f89bec45092595df3b8e9.tgz","fileCount":130,"integrity":"sha512-hP1G69d5Zf9OQhmhnMwKy4qcVzST860C6OfIB0NXBwY96PMbaMheVJeRB6tGYtKUc+yWS8OxMGlIM3py1aOfNQ==","signatures":[{"sig":"MEUCIQDOvu+2dNBdxs5TOVax2h20LrWh7f11zOPbragir8rKkwIgCTwqakJX0wAkhNn3P/UxF0RRJTw245aqkonLB+ee3CI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":546614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqO5bCRA9TVsSAnZWagAAQ3YP/1DTkiY43rJMUB+vMVUl\nyE23niUQJks8kyiKSbGzi8BQXs1XixqUEX4IhZyCWGiJHAlnnzrSWfb0wqTz\nSyi4oQ+ypqMSwc1zbfPoy08SHKEzLHuGqvxK5QC7ep7jj39Daai4a9RUbUob\nlpG7aYkLC6fWOaNshSn8gHgQFaEinY9dfFtWLtTZbSvRSwGKNSFRhg039f3T\nGm3vUeQ9D/i6RyA051pL358H7Xa7t6IvCXTv7e5lgk+RyVtidAgL8QpXA7x6\nJnvITR7d/Dm60LNl067MSxf1rXnnlryC7l0YBDCY6ocCjsBgFwcE/Dv1UdFp\npe1kkDwibK+nMWpnganV1BCEX2V/egni1PmQkcp563W2P+mpj+88SQvlHxPh\naegylevtd69tfrirI7c9m6E5Apdmk22qj65VtNG7Y1QJsbwZ0ITCcuRMFomP\nzuBMiaJJy0eLqKiLPlF3dWPuCMZs0UpVfdxVfAal4oFtYFrzT7NQdiLcwaha\n+fGYwM95WO2eqwcAeE8J321JREY5jc23znWN0YkuMctcubulvW7065xBrl4z\nh/1YQHdDiV9ta8mb5nx+Axqx7ElUKh6mmOXVJhtfewgCmWKwQHnK6N6w6lCm\ne1FxjJlK7l+VgNeg4ZMPDWOrJpGG9pwzYMPT5OaoZ5ybPVjsg5EjEuh7iv6K\niiw8\r\n=1WFb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"7b8d62965dc1299c2d4f89bec45092595df3b8e9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.27.8-589-table-data-7b8d62965dc1299c2d4f89bec45092595df3b8e9_1537797722891_0.5762082481977742","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.28.0-604-ui-warning-5851ee036d852470fe91ff0e2d06eabb8ad4b0ea":{"name":"rendition","version":"4.28.0-604-ui-warning-5851ee036d852470fe91ff0e2d06eabb8ad4b0ea","license":"Apache-2.0","_id":"rendition@4.28.0-604-ui-warning-5851ee036d852470fe91ff0e2d06eabb8ad4b0ea","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"df5520cebf5ede215810f98c1e615e4a70fc3ec2","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.28.0-604-ui-warning-5851ee036d852470fe91ff0e2d06eabb8ad4b0ea.tgz","fileCount":131,"integrity":"sha512-0MlYxQqdMFtyk8GGNLKg0Xz9FTRyO2SnYCQxSzT8cLdstWRgKiSkJKed/PnMNAFvKUi4WBXZph/T2VNkBiz0Ow==","signatures":[{"sig":"MEUCIQCjI0DrEKtKlImkjVP8qe7fDiura1ttoNN/YOvyN4viAAIgBMd2PJvHvVo0hsOgg9Wce6lAg/MY6aI/SVtE53tEUXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqO6pCRA9TVsSAnZWagAAFdIP/RAcX3TkLrNLG0P+86y5\nqXmG3wQoPqmvhQqxLCTTz6Kuzja28iEkzrEoZ0FG8B7IvOG4+zZnyUcv03/Y\nMKF/jjl/poLQR6CDx7UxoktBH4ipfLbvPMT9K3Oqxox5Sia6Vf+R2NJ7VhgB\nJYJlvWuT6puANb77Wq4NYbIZhl9XomAnQRSMjP6sMFIL6Ooles+ojxQU/w2a\n+qP2YUE2gLYufUasJ+U5cbFxKvWexaVPwOJ2Qw2OEiHeeVbtPm8qzMQtb6bQ\nff85WEMLelZu7nGi+DtM1BWGzx4qRR8g3QTNps4PxnmiyLatBN1tBfqjnFrc\nJUyAVLUOdA3NNda4ZmwxDV+w3F81+s7wSG6zq55y86AfYp5PqXO2LxrMxZRr\n2CgIG/GrSJW3Km02hj2Lok5BHybKaaWq2omtXjshFnnO54124gZrrLRzaIAA\n9V3JdMUiTRDonrpdxfiJe6kd2LREjrOjIKabM7FEO6wzH5AzkBRcwksfmfSS\nTwgoBGounPw3TjYz1igU83gDLcGhJxB85j04isSLpWfrLYf5y8ViMETymFeB\nQwqO7aPXtLrmOIdveD2Q8RH0llyKasMxQGuIPidM5eY0iKz0YkRwQB+yp74d\n7sPlkM4RFlHtRihxUynmryv5tPucLkezUWt+qvrAGeAwIR2dsTJBdSDo4fEu\nTI7d\r\n=rofY\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"5851ee036d852470fe91ff0e2d06eabb8ad4b0ea","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.28.0-604-ui-warning-5851ee036d852470fe91ff0e2d06eabb8ad4b0ea_1537797801343_0.4781242295064132","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.28.0-604-ui-warning-e330162bb7637af2ec727fc4c1da052de55a7781":{"name":"rendition","version":"4.28.0-604-ui-warning-e330162bb7637af2ec727fc4c1da052de55a7781","license":"Apache-2.0","_id":"rendition@4.28.0-604-ui-warning-e330162bb7637af2ec727fc4c1da052de55a7781","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"05c7461bac854c613b44aeb1e4395c369092bd52","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.28.0-604-ui-warning-e330162bb7637af2ec727fc4c1da052de55a7781.tgz","fileCount":131,"integrity":"sha512-Q9XSSnbc5e7ralo4iNK0mPeMaLqe05Hzqfg/xsR4okX1jkKJuWn6S/957LFUcAk2moFOGDcVlZwDg1RMFh9Qdw==","signatures":[{"sig":"MEQCIFdzX8JgpgtIpqviQ2BeZFjlOOtqzREBffd5mVB+rSLBAiAX0eU+f72O/76nT39AwIxkrHrxsP8+4ntHckWw4CsLKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqPjjCRA9TVsSAnZWagAAiHkP/i0sV2hTeByMH7HiXWd1\nSSFiuFwogQFG8/TViKPYYbVO7AA+5NrPWVNviNluo5dihdNjHMb85VTWD/R1\nrop4ql/aaXn1u9cCJMiKXsdsd4WeQDMxL7ScxLXKexmQUcNWyBdFFa101vpF\nGXQCVPom3dXUTQNdhvRkxONHP+kcpXKtBDvloqHLIDWcU6ApdaUJ3Jn7vR/9\n0eJbCyUBk8tz5v9/swG8U9zSyzDhVgkNTUSpcEomisisoQGoB4q6i3KNd7bD\nG/2a4RqinuT33cNONIKBIovTfmWhHckVjE7TOewzKRlPmpZxCc67XKBN+lOz\nCBhhtbuqqmhA2FHb+TZswtfAQEXFRWAxv+F8Jjk/Y32B9CTwmdJZc1G+Y4/G\n8Trye/C+AMeu7GtJRAsu91JOBd+A+h8DMARzvSvQExj+jBegws8zCCs+Bzg8\n1SdGV3RXL929HEn0vUsAl3Aed6YoVbcjwYdOWt5ATIqcfBLxn+4gcR2h5HsH\nym2ltUdInw5YIm6zXw4GHbnw9OlYQT36ZjRu9TRFKcjyfHt6Xti1WcPbjKdc\n1Doad6g0LnPmHVbgeLuPkrco740+5Qd1z5XdJX0xAW4rekDqaz2wiN8LFor1\nflw1a1ToP4Rk9fOOAutaJZmEy9bh9DjlnsuQM/mhAAY2Cbh3IOIrHi8lbuED\n9AT4\r\n=RLtt\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e330162bb7637af2ec727fc4c1da052de55a7781","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.28.0-604-ui-warning-e330162bb7637af2ec727fc4c1da052de55a7781_1537800419269_0.9580028443181885","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.28.0":{"name":"rendition","version":"4.28.0","license":"Apache-2.0","_id":"rendition@4.28.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e3c8e026f522c42e32d39da7ca1073e32ee5660a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.28.0.tgz","fileCount":131,"integrity":"sha512-n+EzcElfstseYLodF3PAu23h0diDQxHKUbbGM8n+esLMM0M9fkfqjvr+QqQ78igPCwV8r5llEudE/DvOtOY3HQ==","signatures":[{"sig":"MEYCIQCFMbUGRkyEcO3Begolh6uOFEt/XRq4dC0yV3/r5HcHvgIhAMGCo8BgguEKwtXI+I6NwZsFVpr8u27Wqjfz/NQnra0A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqjDBCRA9TVsSAnZWagAA79sP/2mnWpYLl+BY9omhld50\npVonzufIARIqqF5Kn3v/GBq7YBB3b0WW2weD6hDdgKaLpklNNe7FvQnFWgIu\nGYWSB7B6MvLZYTqha1Xc2S0TAVXHmViAM0deTXElnlqYyWf+Uqp7w9ljDKZv\ntdaQghk/pn85jZmDytD1Gn8O6c2QfPo4AHcH+KIZmQSmgaQU2aU51gfyhLEx\nH4q15/9UNkzk+Wwiu4nza4dDVMg0jfnMC1Q8h/NBcHzW9u6hdL+q+/dQ/KSG\nquKDB7RBF7ObhvxrfxoDkq5jtwBPNR2bx1/70k/drObi1a0qhDnj2vWOkX7a\nHXZxZCGEFmYuvt7W1jpGHJOyv1xETDk6O+L961oZ/jBAEqd7OcBSvdNffWwL\nUHWGLh7+CbTtQLGok5KgNiLNE63shy/QuFkHlskTgZTWRGuTuDFZSYZ2M8hj\nsabDWk52QVYQz9M2CNy0etEXU3aO0cTBOpYODyFBSBG61IuIyWCh3zEg5/li\nOpRWJW8fDzc+qj0KKv9JRoRg5Zakgyr3VpUW5wSkPy5PRi3QsGthY6DSlrwf\n+kgMO96+xPZ7+F77uMdc+6IwlPXS2bJi/W/uCqcoHpP8CuD9Xw5rNYD4bB7Y\nf0xPZq7F9aFiDOU3H2inM3Xy7WJFTZ5wZ1IIIj0RWAOIv4B3sF11XdnPSnFf\neTdD\r\n=zMWU\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"4571193f7945cdec103ec25520ad51310c924839","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.28.0_1537880255918_0.7574111773709815","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.0-form-field-ids-db1877a33c77da9d86e1d066e416497f52e0b264":{"name":"rendition","version":"4.29.0-form-field-ids-db1877a33c77da9d86e1d066e416497f52e0b264","license":"Apache-2.0","_id":"rendition@4.29.0-form-field-ids-db1877a33c77da9d86e1d066e416497f52e0b264","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cfde37af673ef2ca89f54b0d5bba20e168955b3f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.0-form-field-ids-db1877a33c77da9d86e1d066e416497f52e0b264.tgz","fileCount":131,"integrity":"sha512-AE0UvPISxTcLVvTKEOy5KVMgof76IQNnic0LK1wRKdMXuoJj3nGB32YW0nQxdU7T+fBOlyp80czsLwSulkdSxw==","signatures":[{"sig":"MEUCIQDnCHU5MjtIdrOMuHwN99eJpeQ44iSyhLiwLzbBJzfAsgIgLrgf4PQdMx1drp9HZR24RR6qobEmuOAukDIHeqct9Kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbs6R4CRA9TVsSAnZWagAAq40QAJ3u8NRf0K64htsgaLft\nQtNbNI2W1Le/K/DXpoFlKjv+kA9/l4Tdc7yP3LEMAdy1gH4mMQC2fpx02ZQW\nZh6kjkWh5gN4SeuRmaKUz4dVAIvZmRN18L6dMoDOFJOHm0EJXTfW8Tzamxto\nsj/FG8DwFJLaT0khquTw0DyMDWgaB0jJmwg+GTlJFBo7cbEXw0qMUV1jms3O\nlVWYcuZbvxNIr9f19ZHAB9uom7i9gpbeMeIbPKnSNF1tjgizrmW/GeP2MOSz\nI7b4jN9bw9+qkwhTJ/psX3aPBraC0ecfII+VgFQ4eCSYD0Z4Hg9NQ7v2BuPt\n6VwsnemCjY2IX7iOpnRgntxa2jzGVrWvZKrxoNcHXnW/SpUqctQ6L+r/ZMLi\nUqcgMZYbDi637uf3NMsmNtQyoUBASFAf+ZWqkyiiNlHh7XwshrbKZWUbnRMy\nXS1779NxSRsc2ocyp5As3oq0i8O00pVuVjhEbuxV+XH9LYljHMuL5xRcAD9W\nBFS++Fi7udh/lfAzxtI8VzMu/lbp08gtkDIIrdSfQXF3FpxPbmeH6GAdHWfF\nwCsrK9Zl+0XWBxP57nZLtLaBK7R8m22bVXR1sw3zaiEjrHBFKokiis8YZNKw\npVJyhrQXSazwd3vUep3C0ZHYuCB/pZ1LOLBNo5LY+yAR8JDGf04lPJVxE/GG\nOCTj\r\n=7kIj\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"db1877a33c77da9d86e1d066e416497f52e0b264","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.0-form-field-ids-db1877a33c77da9d86e1d066e416497f52e0b264_1538499703780_0.6358869945230641","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.0-form-field-ids-0a31d3c59a61dea1d7a3db858b1d9faea6f1e52c":{"name":"rendition","version":"4.29.0-form-field-ids-0a31d3c59a61dea1d7a3db858b1d9faea6f1e52c","license":"Apache-2.0","_id":"rendition@4.29.0-form-field-ids-0a31d3c59a61dea1d7a3db858b1d9faea6f1e52c","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"ae93974719035cc5134d08128812a2d473411d6f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.0-form-field-ids-0a31d3c59a61dea1d7a3db858b1d9faea6f1e52c.tgz","fileCount":131,"integrity":"sha512-4CbprlRnqcAFqDYrnpSrZtrwSMI5l59GtwSORRpw6bcVSVCScb/GM964E+RBj5GNw+MF/SI7ee4Ee/HfhqLtVA==","signatures":[{"sig":"MEUCIQCn05flxZR+BtGYh7ijyTSyXrl+xJq7/Icz1i7o4qinaAIgAtXzyaTt12boxSxmjHp2m4tev/9Bxrpewn/g4ajWgxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtIkpCRA9TVsSAnZWagAAIrUP/j8+5NyzHRC4RehxIeG4\nS0fYuhnvCWbD7zgf4ZPw4BN8zrre8pS5/Eyoq+CocrZYKKybjRPVYaqZriaD\nxcnz3ElY2qxLKJNYcjTTFZVH2gHs9mxONW1kyXN6wiaB66btuVByDzUFKmo6\nNhyMiTkPFknKE6wdUv3TFPpRuyT02/6wrE3/74akbIwNmVqzqQTlZh4BvSXY\n7H5FiMy/5cDk2vjSP/U0dgyd0tShaYTgctJcKAB5y+3S8YPFX+5J+tn9zQwy\nijUpBqFOasPLw2+CmNTlWeArsx8labxt1YH25JrL96AwfNZDnkDafCBWOEVw\nMyQ4pG/cUBmWN27K0N3/peHheD0yXOH3zQWSg2qG8DvF1kyp2l5Tv+BNfjfs\nIG3uZFt3yc2mOUqLBcHnqyeQFzsE8cWcw5JcMz1LeWFhpuLpY2B8xtO1tZkj\nFRJEiJ1cg7ZfyLsI9MigEMwOfsjig7odARVywOfozXzsiAmqzgv3dOA/6USd\nWWjctCcTbocGHGNC8W/nTr7zMWdYsPRC1rNSPCn2hf+UpDteZ39vKVgiE0RY\nTazNkjtUYKhzKKhPJu9yGbJhg+F7Uu69TBSJzz434fu+9S7bGy0Zxetg8S2O\nZZKCb4OBXPdXCfk/XSn7jwe0dhuR/bD4dLeAmItieYAheoF3mgG1Fk64k/pb\ndJ/S\r\n=a7d3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"0a31d3c59a61dea1d7a3db858b1d9faea6f1e52c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.0-form-field-ids-0a31d3c59a61dea1d7a3db858b1d9faea6f1e52c_1538558248354_0.6709777397938532","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.0-form-field-ids-6fef94e8b89e4d2d2bbc0ccb3beba945ceb9f015":{"name":"rendition","version":"4.29.0-form-field-ids-6fef94e8b89e4d2d2bbc0ccb3beba945ceb9f015","license":"Apache-2.0","_id":"rendition@4.29.0-form-field-ids-6fef94e8b89e4d2d2bbc0ccb3beba945ceb9f015","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1bc63a5bf9dab0e3bb97252c15b80695e9afc8fc","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.0-form-field-ids-6fef94e8b89e4d2d2bbc0ccb3beba945ceb9f015.tgz","fileCount":131,"integrity":"sha512-BzHvim8tHOHIyu2EZkErTgW48GIjt1GTk1O46FoFlwC9UbxVPuPiBKuK+/OjjWJ5iBwCpw97QUFDEQZ9jH43mA==","signatures":[{"sig":"MEUCIEp6bE2uiKLDJb0hX/1NLFn10fgxqS0dx+JTNg/gu7TbAiEAiBE9fab6UkVm/FIoepn5Q5/8QjHL8nRm2Tu0r4ZgmwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtIn3CRA9TVsSAnZWagAA4V8P/15m0FsgbY2f28eqqk8b\nn+QbXYAst9gCOO3leE2x5r01SamRrHbbELMQaPsd2nJoTZDtefDoZ6zr/QSy\n5wPsNGhp1n3rv786ibkSwe93V/k/qqUXeD5zkLglcEzL1JhMQi1cy2PZWwfw\nbtNXTijm4yBnC9ob3vZV06CdzvAa5qK+rSNJ32dOQYJthX+C6zoouXBmkse7\n95md4u3rNhdLY1mbGokA4rufYcvhwoyC8T1kwsw8R/v67cOoI09r+RSVJuK7\nc0N0Fdr+dzlLWCes0mHAe/WELleoeFGaSAnOTXq+ED9ZpO3e9ZK7Cw5fhS73\nWwA30qzxEMHcOQzJ+jjEyg6p64HSKNh3ju5X+7fqhylW0ul3EaTFj1Gcwq8h\nCbtZb2XPxZkSvgiNzZjbui1MPzuGuSOgVEQXa8defr7REnOGbByFe6W5y5FQ\nCfKpQN3aQdPW35PLaEdrzihpNFrizav+LS5gralsCLklbs02xwgHEcyfYDTJ\n7PT8A3xsxVUKaMQDwOucSEZeSuHO+AkAJlGkL8TxbuBPZWGNU9x395CJVL2E\n/bi78/hEOlIyQcKNhfGkcF4bdgNuNXiAUB4Uj/NIx4pFLjnjxDv68sS5qOje\nhROB1IcejvgOInXj3UYzpHbuUrCOvSJk/4PuOZ1VD6H6S33Ip1s7pIf0GX6i\nErR/\r\n=yZz2\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"6fef94e8b89e4d2d2bbc0ccb3beba945ceb9f015","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.0-form-field-ids-6fef94e8b89e4d2d2bbc0ccb3beba945ceb9f015_1538558454774_0.18957266973695286","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.0":{"name":"rendition","version":"4.29.0","license":"Apache-2.0","_id":"rendition@4.29.0","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6b2044b599837e3ffc2f458aed24bf8a2eca5f1d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.0.tgz","fileCount":131,"integrity":"sha512-77nNyZosTR+SQ9FQt3uqarWtpb2qGucUDhedyQdCfL5hmeqfI18mUTWuSoPgKPHwOFZEq9gh4P11fbA5boKsHQ==","signatures":[{"sig":"MEYCIQDd5X4ToS4YNjhrFfP40vgp2+45H8p6qgCFWc/95+zH1gIhAL6W7k1/x8MJcL603WsGD+cNGXznSKRo/Vn+IrvAvXzm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":548328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtJsaCRA9TVsSAnZWagAAWK0P/1MWJKPs+JEzVmLH6Wpo\ntFlvvUVkadb9rVZLVHK50OmHbkupYWUBjb5h3MJWYlChWcX9QzTPez2icLZX\nP8dzktCf/eg12VKu9hU5WDyIDxy6dO9cgQNGVA16wyZNz8A8Eps0ckcaEkOw\n+GLU0CL4dOyckLIGZQ1qjV7Fm18Jdt0Ya8SeG8PFan++vmcfZhAIDaWLGyjJ\n4KZFQUowY4cmYDgNHMKLXTuxDroAqMZMrvRishCx1RjIafHmINcMPpIsVuPz\nu0muXCRsJ6tjr9EvnW/NOX2pBsQtiSYS3aBId4y871VxD+6sAODYhnIHAGr3\nehlq0Yql5Qhrcb21m67Mv872N1hYAZ1JtAfr7F3ItHOxXa6BFBTvPQtX4ODp\nV4mCbCuiystuV4lNSSCi2Q6bYL9rTtheOwr1V3FOTCo5oqN89uSA/CGF5UlZ\nsprnnfJHFuIPEmI6JID6gsG7ybUD0tI8Ii70UeiXWUadQXdBxy5l+Cvz15vo\n4KP2o9sMAUc9ahkFHR0WjeviXIrMcIpA2itBIInDKGXjnyNpMrl+uOBwDG19\ns2RcU6TqYQlyiBvGGq2Z92vrsWBzkXvg4tppwxavwxnxrmM9MoDVr+Q3i/j/\nyjhrxNZ/fmdDQS1lA/Izcz9IKryxD8dlkyJ+JcZYUZYZy6QXHN8rGcjDWkh6\nTS3M\r\n=fvfO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"f9c35c35e431bf8bebeea6a8f0a37d636096e54e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.0_1538562841799_0.47963307093924823","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.1-464-contribution-guidelines-81652b62a6ceef8e3e4ac98ecc7620dc18247dc3":{"name":"rendition","version":"4.29.1-464-contribution-guidelines-81652b62a6ceef8e3e4ac98ecc7620dc18247dc3","license":"Apache-2.0","_id":"rendition@4.29.1-464-contribution-guidelines-81652b62a6ceef8e3e4ac98ecc7620dc18247dc3","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"68ba11bdaf0260fdcbb6ea74d597af6219e7d25d","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.1-464-contribution-guidelines-81652b62a6ceef8e3e4ac98ecc7620dc18247dc3.tgz","fileCount":132,"integrity":"sha512-IUGQZ7ol6oU1WlQz7UsRmHLahjHmfvbEXF4E9uSLisq79po4lNkrauK7Wh8k1BGq1oCkeMpFyDpNoMLuzS4RBQ==","signatures":[{"sig":"MEUCIAh+nGpzJy5ZIt0tqQBOPuoM3PeujSpReFdHcq5+/ItSAiEAx5WwfCLgdEOtCZLHV31heqpzeDj+2tjmLiJCVfarDbA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":554519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtMd/CRA9TVsSAnZWagAA328P/A0I0GoydYWxsrzWOaFe\nw0DQWczTZYNQS23LKkRQGg/9ISurllKOIsB4xJrbMVNyiqYbYrzUpIGIN2Xb\nlFr+cijgjQyNXcNWUL+VvMp1P6/YfwNPQp0VzHES+WZeqDNMEYzRyeW2ZIaz\n1sNQPhmkRJELscUCeNzYLvGSh8q3tN4GJSrGx/J3v+ysuSoKgbBov4AASKyS\nYe2xYoHPKAHGFiZloFhM0p27dXm8CG3SwuB5jYp6PlAWhhuhETzqNpoBm4Aq\ncXGehsecQjX9EEP8c4lZePi+wDwoZRM1BKTpV18Qwqtg0pdJr1nxmPjrx3IW\nZ7960p979/rHL5Y15PIi8MJ1xeq2eGb9IX764JJONxwoBl6X2hU8rfGrMElu\ns+Qn1ASjMwcWSQakXRkSj3JIkN2PtyKLgqlQeLFBKw7rG0JEmJyCgn1oDdRJ\n+EJ8WD69EgLMfNdJSGblqWKShR2xkASp8zbF/oYIQMgDXegcD4IEMI5YsSf0\njZu69QZj4QHvblEYTk9MfyZD7I7Z8Wz4uDaMxi0XAcxotL2wwdZNPRnrU703\nuN5bQYcdruCAxifSJlXgEFYb7lbmS1MZXxt8xTsU8Ld0+qtUD0S99Au3VUGa\nt34/3SWuqU58Ro4tLTfF66WPgG7H9VNN6I+kIyt3vq9gqM02hVqDLxCY4qlW\n1vPR\r\n=TTUw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"81652b62a6ceef8e3e4ac98ecc7620dc18247dc3","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.1-464-contribution-guidelines-81652b62a6ceef8e3e4ac98ecc7620dc18247dc3_1538574207256_0.9799692753929243","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.1-464-contribution-guidelines-866c8af0e556bdea4fa213885dad733e2d9b7459":{"name":"rendition","version":"4.29.1-464-contribution-guidelines-866c8af0e556bdea4fa213885dad733e2d9b7459","license":"Apache-2.0","_id":"rendition@4.29.1-464-contribution-guidelines-866c8af0e556bdea4fa213885dad733e2d9b7459","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"db2c5e0808fee9b86834cfb69077ffa28f029de6","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.1-464-contribution-guidelines-866c8af0e556bdea4fa213885dad733e2d9b7459.tgz","fileCount":132,"integrity":"sha512-u31Ly5aoC2aypCiWUaUl19CdOzO5UTE3iDm593BrtnDeH6oC+1otrGPC9R3sQxuhw5Pgoxbtkc2tf9U5WFiVTw==","signatures":[{"sig":"MEQCIFWdQEG4snBLDuk5LDeapYWLJvV3pME1ST8xcQSGrMOYAiBAavCw+YMJQj19jFZYT8D9csFnRxxQENlTJ1jQ+6yM8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":554517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtMl1CRA9TVsSAnZWagAAl/YP/3dbtQIM/wnrnv2bAxzf\njWipgaf4Q7P+m5UeZOksjCA/W01qBFCzbhyUsO9OoPoOLJMp0/vZGmtT9Na1\nm6gDce5ag8RzUy26x2pQKnvJTuLFBpXo/SdPhM8FcPP608JWXdU9JsaTmZqa\nnnLWfRGBha7UWck+SRq/aXORSMLeW2SLvomYuL3GJKX9HrGgL61o2lwHvUhD\nAgMPS0KeCLOgW+srew7JW1gxDtEmUHmoa6QMQ+HAOzu27Npot1FhRBHfiFcu\ngTi4/uW1QIQpLN/3V4Q/qP2UmqM/QTwOMBLrcg0LF3KBmku/9yjHRW/3aFV3\nqKWpJQTZQolnsrKR2xlNCH0hDMaQgg5x4VeecpPMnmBJTAAHgiNGspZPGIQY\nnxDpag225aIzQJdHZv7v8WUJhE3AH0e+foyXMVj4URo/iCQm4B6+YKeybHEJ\nZ8cSN1MwPHsKMRIRrX95HHAU+hxIdSWlH38HwNFPyjLGxI87c75fUP6FIdSg\npfdihz7dySZj+XuZj5BUcyrAPwpftY2xhmWz67YVNxPerfF/H6vMUANJNkPI\nm6wJ5s1rxVGpetk2IU5etCqfYeNiES0/tNuTRloxsBu2VU7V/PdX2sTM5JAx\nv0mXoSZTQCNDxhySIth3Mwu02U443Y+Unnm11tKbfAuY1iRUYBPF6/gXTfo3\nIyQ5\r\n=4SEn\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"866c8af0e556bdea4fa213885dad733e2d9b7459","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.1-464-contribution-guidelines-866c8af0e556bdea4fa213885dad733e2d9b7459_1538574709074_0.600634783213873","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.1-599-form-field-title-76d859f0c23c2f9634c4f18541f106c9d4b7ef92":{"name":"rendition","version":"4.29.1-599-form-field-title-76d859f0c23c2f9634c4f18541f106c9d4b7ef92","license":"Apache-2.0","_id":"rendition@4.29.1-599-form-field-title-76d859f0c23c2f9634c4f18541f106c9d4b7ef92","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2438c2010f653bc47e6a512d68a3f98c33fb92e0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.1-599-form-field-title-76d859f0c23c2f9634c4f18541f106c9d4b7ef92.tgz","fileCount":132,"integrity":"sha512-XZ8eah52LNkPlI4dzJtJb6gTJfSt8JCfVif1DNYfPUSD7Y/EGJExQiVRqnIYVe6uJ3t0l5m96z8NYIU7v1WhPQ==","signatures":[{"sig":"MEMCIEgjDAARZMpS9RE6V5n4f4h4R3yaZ1tzUn6/DDxgjdRZAh83b9Zpf7BszM4M5Io3lW3NBL9K8qiHlQtmXfEp6R59","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtMqFCRA9TVsSAnZWagAA56EQAIRiU5hizWrvBpGIbLSQ\nHjv71hZExeZHkfNzymgK8xWciHXsbSll2Q3cKEKy9WEAGnEiH/DDTnyOU0aQ\nRjLrjMJjBfjvUKp/WKOj+DHZN1NXs3y8XHhbxnIvtxNEZvy12SZM+xNh3SXD\niAZb+oJtxcSE45cPOyGnRjGyPUrFfQb6yD3YWVs0Bk68xMQ4MA8mbt+B8v9Q\nW0mnlhZgNjVbC99RXq6jKLJsLdgCoWCO4Gty9HAXPYkM1HTNpujAsteGY2Ru\nl8MHgYquefMqi+6cqTA5XZDT+7hzoG+3CICRcl9vdgaXjBV+SqtBvXZ0r0Mb\nAzU4ECSq+k7pf17YnBiw6uHqTbNaQf11e/arSeotsBhyqSuFAL5nC5mp5TgK\nvIEJn97PXV4zu9mbWm3+/kLCXpDpgvKBjf36c8nPKGkrlIXM7/DswXTYQWNs\n2i3UmqlNMwxaacLwPogxsgSQitb98DB8B6XfrvG9/TOZbkjnD1OCDX0aSeVn\n4f+yQF5K+vASMUjPLNJUq+qYrI+aSggmh59zmBA7dktoKBHXrnPLmDjf460j\naYO7+8tbmhpEbwUSXYDw1tFb1y6dSvCzTQpDSlwmBkw39LZ+wbUnQ17gNjN1\nqo4uh45FULQgTVK+qujdPXm4DLLTHQwa/v43f5O7yIZpYIKNfhTtLerYiO3g\noQVF\r\n=zJyf\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n\n## Development\n\nClone this repository and then run:\n\n```sh\nnpm ci\n```\n\nThe interactive storybook can be launched by running:\n\n```sh\nnpm start\n```\n\nThe storybook can be accessed at http://localhost:6006.\n\nCode is automatically linted and formatted by [Husky][husky] as a pre-commit hook.\n\nThe interactive storybook can be published by running:\n\n```sh\nnpm run publish-storybook\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"76d859f0c23c2f9634c4f18541f106c9d4b7ef92","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.1-599-form-field-title-76d859f0c23c2f9634c4f18541f106c9d4b7ef92_1538574980897_0.24240498149663559","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.1":{"name":"rendition","version":"4.29.1","license":"Apache-2.0","_id":"rendition@4.29.1","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e3b5c799f561e11a51da95dc26f3b5aa7c1b52c4","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.1.tgz","fileCount":132,"integrity":"sha512-5LlG2Y8wPgwJncV/3VDhWt9/1e08RkmEiB68TwictjyWXG79ke8ZwdM8dKhzo9ZWfPHgLWlyC9ESEo04JVRuDw==","signatures":[{"sig":"MEYCIQDCoDguOqDq2i8l4iFYQj+lRcuBU/k5m3ruf+6dgxUBpAIhAM0EwFSXSZ0MqgT5Dwp8oR2bQjtmT32TAow78+CAaWzw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":554448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtMyRCRA9TVsSAnZWagAAhsQP/iNNt3oBBtlUMH/xrOJQ\ngTB3+ktbzj/ibKHXexxngjNsyEgtaIdoFlMKMQisnxAJRFwr++EjQwkVq0ey\nlU+WnRz0BdntMddfcMfk4s6JFPNJ0rO2mC3PMviwrDoyXbRmaEdV7LQcH42V\nmersb7YdBylvQHk4cPILTI2+NDnQgB06Q3Mnt4fTig6Zdn42SfZKyvhn/5e/\npKN52/N8WXJKAZ0e3iFSIrKKIvGy2gUPAYcpROv5/np2bktz5ydshhJitjYL\nWAOHazhbUrFYfTYrNpf7AFLeT6lFRBpPwGecZrU1okj0ecKON2SR5oodPoFP\nZMy7j+scqYC/mhKNbG4jd5x5MX3Zqv2RJ+qCKUmWQCU+KGNwXHHfiI7Y5JFD\n9Xggky23buEB4eDa8buGIy2aK8Op9BvsiX3yGT7gRhHou8UBJG20JfTIkCuY\neOINvj7m9pVhiEWsoCAQYNXaJTLpAdMRKJnowAqQcaOfQ6encYmegt4t2T3f\ndo+osacjxe/S6myyj8bUqJieVs7J4cM6SK/gy/iVcafSEv9NIVnK5CwNpXhe\nP3KrxlGdh2IYJJbSp85PwYIKxdYSNypAGsOzUVKlD4LpxEcAqsmQONSw+q9R\nzK5fsHTIAsmQU/jVxh5i6cNUGf2CS6vf4n7cb8nPaKqt4P3z8UZd+7rCedcX\nIe2w\r\n=i0Zl\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"70a01a05201ceecad2b8c2913626141cf3dd5975","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.1_1538575504529_0.5400541002204904","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.2-599-form-field-title-a9d4a392ace1574faae244a437d22ebe4b7f9c00":{"name":"rendition","version":"4.29.2-599-form-field-title-a9d4a392ace1574faae244a437d22ebe4b7f9c00","license":"Apache-2.0","_id":"rendition@4.29.2-599-form-field-title-a9d4a392ace1574faae244a437d22ebe4b7f9c00","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6bd72a55b7ebf6577398d5826a5a658c984188c4","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.2-599-form-field-title-a9d4a392ace1574faae244a437d22ebe4b7f9c00.tgz","fileCount":133,"integrity":"sha512-14WeHoQwweiWkvGaYVxkqmczzRppENEcD76uTRit57xtNBe4uRC/z/eVlGxTFsXFBZEMmLm4m+6HCaDD8elhgQ==","signatures":[{"sig":"MEQCIDPP4zC9GIzb53cfk5e/sR20dbx3fl1rRjVrtw06jHe3AiA4lbFkvOPqWycurkY8/VXjh0VsBxDtjpqFW2/0iGn+NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":557290,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtM8bCRA9TVsSAnZWagAAQLIQAJ/KVbHR2nFaom+GGTs5\nS18m0cSCdHulwCxuIeeQ95lJtIVy+MaJ3xqB8SuMN41+oz/6tiZhY8sCisLP\ngd/nLr/EkNlGau1qFrEVm2uyBqka13TdFpultofKTGABji2KzNf+SNMzz3O8\nryozMvy7agPtnMdu9Q+YeBRzBH5QJ+TxlhCHu5SqFa8/DWllbwQ/PBQ0Rr0M\ng2NK5McraNKh1AXZwU1JSkh0iroYw6mhBLe1rNUxQy37ZJZSlgJXqst+6Rew\nSbFAfqRDSOXcMgIXrZ81CQIE8f9ABHDdMPQqYPwq3va2wdDUy/Pzdo9J8A06\nPf8FIeneTYzzFvZIBLkerJr9UmWhTC3VLOxacKyE38hsYALyf+svPvu+44FT\nnsBX3PltQ0OJrU/9qrqAQ8Qn4eSvTsUipquukKz1AfDlDCHdeqq7/+XcEapy\nM+JheMvmuRVcxYPuxcNTR6qAu9PcMcfak9b7zNqKkDyDwGJcY0Cq1qwfGetw\n1NZetlzm0WPYVZ9CqBnSy4ooH0A25XJrsrNYogOzmLp/3n8cwSeD8pwmnS5t\n/MyThwpZX/SuWxC1Al7DlZiu1DLpwT9QXCvsQm9bFLTezaPLV6JjB9xrj0fV\n4NWch55Ndx+9acAIbXp/Hca+D1sW3DDBYa2dF8NgVDlyKf62xh3JF+aiw6Bp\nSrkL\r\n=ZTSj\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"a9d4a392ace1574faae244a437d22ebe4b7f9c00","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.2-599-form-field-title-a9d4a392ace1574faae244a437d22ebe4b7f9c00_1538576154379_0.6857689269845859","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-625-table-horizontal-scroll-issue-81a20af7b3ba0f61c85b715657c64f809b2b9e2d":{"name":"rendition","version":"4.30.0-625-table-horizontal-scroll-issue-81a20af7b3ba0f61c85b715657c64f809b2b9e2d","license":"Apache-2.0","_id":"rendition@4.30.0-625-table-horizontal-scroll-issue-81a20af7b3ba0f61c85b715657c64f809b2b9e2d","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"31c2cfd19346293e86ecd6adde8790cffd9ef343","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-625-table-horizontal-scroll-issue-81a20af7b3ba0f61c85b715657c64f809b2b9e2d.tgz","fileCount":132,"integrity":"sha512-VZqC2AvBsy7+C/A66zCQs3hp5veYrQEYMk9NDWn197YmqZW//57VwYcWxcnEW5fc7UWiwckumSapPviamyzCmg==","signatures":[{"sig":"MEQCIFOVFSryNoM9UPqmPw27yK4HC439wC1hfXh0jd06Fuv7AiAIV9/3OQuKjpr/7gancuTeGcrkota/LvODGvFqOFB+Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtlBqCRA9TVsSAnZWagAAtTYQAJdtcp7HReiQTvyj6xlr\nNpvOQ9I5UO4qSvE2iYvI8Irast0B1AMglCjCVt5y2nsC5C+nFl82UN2eNM8Y\nMDzva2kr5sDw4IewS67Rn5eK5bc19OXNCk4NkzanKYEYJIZmogfvdy/wlEIg\nu1V78v/hXW6tSRkUkJtTEPKjo4f0/jCg5uk4ezl3ikRMXC9BvihzGReJO6Ei\nXuxOi0LKkpNTdCzHaV0evMnNV2kYwek3VWhmNOSsboiZp7kBCUOcpcT3C3c0\nMq81GqnX2bsWcsZAkTdVuMaZDGwuCp4TXapC3JklBAF1gJHJ/oaXoTs1kJgg\nAiOyynfyo/ytZzQrORkHhzmC4dHsGcrnquBDgY9ZZreMnWS0xjvyWc4RDfj1\nw8lUr7IpmdBD/h1ItuZw6PJYFWJgGM7zMhfwvaHtNYvB1EQ4mXW0TuNvXHFl\ntMch5PB0EEeDwOG3I7a+cQtlrVxo/p1Y0FjS62YFW0wpvVsuozZREAXqg8ZY\nhKYWtEDnEVdVwj11GZw+BHVREhMSSJNQUtTT3Vt7feAzgPaMRXiQxk+f9Y8H\n0iL2KJMmPOLCbFf/CXJD6EVqUZi4kLJQwiCH+N+i7V1SW7gw442S54/kzMTD\nPsBv5TMZZvV19uKN0dVyuSQHvwTswOCbfJKx/1RQCTccHhxYrDmedTDaqzp5\nCon8\r\n=q3XM\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"81a20af7b3ba0f61c85b715657c64f809b2b9e2d","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-625-table-horizontal-scroll-issue-81a20af7b3ba0f61c85b715657c64f809b2b9e2d_1538674793576_0.867908188318369","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-625-table-horizontal-scroll-issue-b825136c6b6a7fc82d9f6285863e9de20ad35a30":{"name":"rendition","version":"4.30.0-625-table-horizontal-scroll-issue-b825136c6b6a7fc82d9f6285863e9de20ad35a30","license":"Apache-2.0","_id":"rendition@4.30.0-625-table-horizontal-scroll-issue-b825136c6b6a7fc82d9f6285863e9de20ad35a30","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"21629cb8a6dfaddb2f8023f2bbd601088958acd2","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-625-table-horizontal-scroll-issue-b825136c6b6a7fc82d9f6285863e9de20ad35a30.tgz","fileCount":132,"integrity":"sha512-OajphpS62TDFoI00wKBPxNw7m0phb/MoWNSmxPbgd24vC55uxel5E9gcOSfUEvzk4VpM+Bf1bB3jvk31T8mOQQ==","signatures":[{"sig":"MEYCIQDV319LQXdkuNnE1pPxt5pU5orj6S2rP0iSd4nZNv+M1wIhAJDe0RKvKIHYEq8lOfNIXvOVzt8F+Q0WGw6Qrz84r6X0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbujhoCRA9TVsSAnZWagAAZ8QP/irX/r80oUrTnQk9poka\nKOkJuXP6SyL1J42ZktuQptgYWCAVB6bb17mhiq18UlbKIxdC1M7WS5y2e3Mp\nst0XPxRljv1LQlP7zXhmoIumWhMtOh6vTnv8BbK7aku1tbYmeYK901RZePnR\nud8l2YcN+3k4nEn7QCrYhLJX1BM0RT3Q8GhOPXRV91wsMFl9sUlg1nGHx+Wd\nwPbMogjiGV90WG4owmHvOrztNUElicY7sP84EskgllpmiTofFg8nWwvaPjBN\ncybAQCK9pr+q4x22POYK4CbeVNHPak6ZwUKMU+BktkEWRMySmukU3ERYgLvq\nibA8F7B8OLNKJj7hNzfY9m5qSNXKdeYH4eLPJD4ifwoVTEGq9CoXZzO5ypuj\ns4g1YqW+22A5Lk3m2EG8mNz3224j6C7xbYP9BAmCcx9q6uCH6M/9ok13Y8PV\nC0akIVEifRtBSfJiQPxDIPq33u0W508FSHVE4f5FBSx6z59guDZazdVo6Ngk\nC17L9jEUpxz1+WrBhm7Bm8172tiHSE3u3f+lobLwp11d98SgX0FZqzB8jyBM\nKvQN9SLwf4ol0PvD2ycKRaBqefrCdBqJ7qa2p2ZKPu66wGZq21WaRYQ3fCEw\nUp//tATukL3Aa5AVVtsDzOAacrFoZZouXXFDzg8dRi8nwpIyAoeR08BzBhDN\nd9aZ\r\n=bPsa\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"b825136c6b6a7fc82d9f6285863e9de20ad35a30","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-625-table-horizontal-scroll-issue-b825136c6b6a7fc82d9f6285863e9de20ad35a30_1538930791335_0.798688647860823","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.2-589-table-data-48168f690a703f35d4cebb88263d47cb24102f7e":{"name":"rendition","version":"4.29.2-589-table-data-48168f690a703f35d4cebb88263d47cb24102f7e","license":"Apache-2.0","_id":"rendition@4.29.2-589-table-data-48168f690a703f35d4cebb88263d47cb24102f7e","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"32df90c50878820c9e1da949bfaad40f47419dcc","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.2-589-table-data-48168f690a703f35d4cebb88263d47cb24102f7e.tgz","fileCount":132,"integrity":"sha512-6mYhM4hqf6RiwEI/1+lrFwmu54EQKO4fPJo0W1TWKlOywB3a2YwjzT8JyHJQNLeb+P9zcXeFJ8JCQDqgcb9z0g==","signatures":[{"sig":"MEUCIQDr37fZzmXj5trr93UG9dS5sYH3GlSCyCXlCF7iIIJv8gIgJHA4sM1fAJchK9b454jZRUfFV03k4NYY9mlR6X1bWvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":554891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu1GJCRA9TVsSAnZWagAA3PQP/iReKYXJpph8R2Pk1ipE\nGZybwY3yJPorzLXNyjet/BjiZnh5tJJ+tb0aRWh/enxJmOSqWDmK+mN2JTeW\nlVelzzlwTMhf4GVLZvrtY8PuJWS2dRfqz/umBbLgOtTym9r5QSUJ9X2TFvxq\n8JO4KOXG7BindRJvsDsWkReVqrP6pYkZ+RGQiN1Eq0mhiSWrIxaXHvAA8TBH\nRY+DV3LaUXKHdaQaYuJq504Ol/6ZCTguhEdOnHU1Dwzh8BAva9eqA/tmF6DO\nkGklAFdlHaM5a19XMSWKUmYDFWrC2Z+jMXByksfUseTJfhWt4KuaXZRUPCj4\nav93gRpkxXe18oRZWflfoyZpnMQ+yNEsAK7bxauknvquxnXgcJLMcoPgY1Xa\n6DcfPaLU5tImq9AsQsv4AFmXg56mEzIv5tXOm6nF7W9kGY2BzxQPtb5cJ7/i\nU86RZxZeTH0RvXIaixDioWosdM9a0a+Hyi3RJyw+HhmKZdt4SD9lEftvTOaJ\nRwQywDxUCoNZ/FHg02QtTaPvM29Z5aHpEjGyncxjxodhUCyqUfE+N+JiPTqD\nqZKOqofSnB4VrH5shxSN7R+yEfQH46J3ZW6sesk3nQ/D6jZVgWRdVeVZkDhR\niV0mHAxcYIbq57An+5KBULgwVixsjVDTqAoOpEHhbOw1i2N4Jsf1GIjG+cY7\nogA4\r\n=CIUI\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"48168f690a703f35d4cebb88263d47cb24102f7e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.2-589-table-data-48168f690a703f35d4cebb88263d47cb24102f7e_1539002761081_0.6043462638458901","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.2":{"name":"rendition","version":"4.29.2","license":"Apache-2.0","_id":"rendition@4.29.2","maintainers":[{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"80f921c85a26c86abb95dbcc29a413ea2762864a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.2.tgz","fileCount":132,"integrity":"sha512-k7c6EY2vxiwNmwCEJN8KXz7vtIWYzz2nUoW2KbDUngL4buJ8uzoLKdfp1K1tA+MxLlJoJH2RB8NKCh0djXyx2g==","signatures":[{"sig":"MEUCIE9MYh6KQZIjVqkxrZk9TpDRXakxh9yeeAa1jAhG+ETqAiEAjCYkNvTVbFkwHW4jXRHqzmkBzN8v29+kpGpCUomD2kw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":554835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu1hDCRA9TVsSAnZWagAACewP/1iBIpDuhgi6lBHpfdr/\nAakwbBr5DN9cjvdNrXz8/mN+dF4JkTaOzxDhB0gYfxT7v7rpMKX835Q6FMOg\nXPy4+QtT1nOXUOA5mmDtfELg6/TRyavUlAuX77V32+5Uy9h2yVUVcrjGL3GX\nk7+eX0LPGADPzi1JfLo273wsXwxBhLZMJPsfPu9lMLZnOvAYre0BlSoQOnCr\nX8UbwiBkIycP//jBShhKS/2bh9URzxIL7O0SwrwiAfZ5GwuMCmpPESFuOeW7\nx/j6ZCU27CA4Q52+fal4nK9Ki5PN3wJiHCVXib6sKNRYg2N6uaJSBU8j/ePu\n0ATXO+qfgWKUdBWwlrTxGGiEP/ldSml+l7NOShzwkdm1nOm9eXt8icK9UcVj\n+o6taZi/Gr+cELSgYJ0eI+bQURe2BQPYdpEztUg84Xf7+mJKqqh7DujfCNNE\nMpwUg4AWY8NtE620HRHIY8wYAxmYkMnOBNmz8aDWCVRra1ItZ8p68D/fAWH4\nyp47umc2u2V2XKBfciTCWF4d+bf603IzMjnT20nLIoacikcGUQ8xVmEsYpdB\ndNeMLOahdTSZFTC14xxSmY/msPJt2dteeI0f79v0Lk5S6NTwUoF7C/IsyQN3\nNizuNzYlZUJj00G18ULZpyifCEBZcM52H0TsQSPDWmfTB8QYSCyLsOzA5HzN\naDJF\r\n=0Nzu\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"7cae2bf6146b639584b21f93fe75ebf60b4d2892","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"resin.io","email":"accounts@resin.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.2_1539004482410_0.8082843918370197","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.3-pdcastro-resin-semver-1.4.0-745117f25f25edb933a22810d3bafc3b24be2286":{"name":"rendition","version":"4.29.3-pdcastro-resin-semver-1.4.0-745117f25f25edb933a22810d3bafc3b24be2286","license":"Apache-2.0","_id":"rendition@4.29.3-pdcastro-resin-semver-1.4.0-745117f25f25edb933a22810d3bafc3b24be2286","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6ea6a61864bd8b922e10fdcbfebde2d3d0771e7a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.3-pdcastro-resin-semver-1.4.0-745117f25f25edb933a22810d3bafc3b24be2286.tgz","fileCount":132,"integrity":"sha512-O3l7MGHrGOJQve4v5b6JAuhSvRNOIqilUM6csJRQsmmDSokZT8ivG6O7ArSfq2ImzLhnmuTok0BUqqiklyJZLw==","signatures":[{"sig":"MEUCIFRS1TeZSfhUWukDoZDtQHf7TtvT+ZV5YE7ySP50ZAK2AiEAy0rkPSrPrv/oP2Hd6pBCT2CvrPpSo2Kd5Hsoh82huqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz0IoCRA9TVsSAnZWagAAygIP/3tV/PhZrb4IDwF9c28a\npMUPyhDJ+ZKrd+R790xtFu700DsGR2KqgbkJZpjRcjXFVqrOFndTEdIp/wLL\nsVcjipiPap0mQ+c8IjfXpnJnWpv4rawsI8XRCkZnellQ0+Qpd5B1rZCHXxpf\nObJ94lI4EW2kWkwIiPFt4CXJWUu1UFtJyaRrG5LFlY1SilQ2yBRSVhz60D8l\n4qYsh460JikEW8R1k2SHUP0zoQBb87wBGHQVxoRz5zMq0AdEF/Ppy1ic34X6\nQlOG7RH06ZwBeEATYjBteH+CSEMYX0soh+OQXZ+dln7pcahUGRvDXGXdt/Uo\nEnI8wEp67Iv7V0THLKewRFZmeqYGd2oPs0AxCrgaqL/3KXMWhWPucMKSPXLn\nYbVWAnBYZy3D+/4N6BYIQlnyIaBFQV8UPPwdDj4GaGf5Ab7Y9sNG0G+YNDDz\n/78WFxXQnIe+rjSCXGBk8jgcOTOuwS9l1dEXbEji77noh2eMVDy6TKaDIERA\ntYflGbqaq5HydUeVuF843LKGbA3fiVYIf09m9LsLzG1xgUd0ndkE2mLinjpX\nB/zfnkMlDrFD5mSjws1o3VJ9FrkfdmIYaQRWLk1XUtpymFJvQw7j09FqMcXh\nsyoFNpfC2gW9rpTfsHmW7SOyNqmpo38fne92tixZoRahVbsBgYaCqNzKtD4v\ndRKe\r\n=LKq0\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"745117f25f25edb933a22810d3bafc3b24be2286","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.3-pdcastro-resin-semver-1.4.0-745117f25f25edb933a22810d3bafc3b24be2286_1540309543078_0.9665998580692094","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.3-pdcastro-resin-semver-1.4.0-b9dddb6dfa9ef5adfb9d5928e76310ff5d28c483":{"name":"rendition","version":"4.29.3-pdcastro-resin-semver-1.4.0-b9dddb6dfa9ef5adfb9d5928e76310ff5d28c483","license":"Apache-2.0","_id":"rendition@4.29.3-pdcastro-resin-semver-1.4.0-b9dddb6dfa9ef5adfb9d5928e76310ff5d28c483","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"09a763cda65eb21392b172c626b8e731121b23d0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.3-pdcastro-resin-semver-1.4.0-b9dddb6dfa9ef5adfb9d5928e76310ff5d28c483.tgz","fileCount":132,"integrity":"sha512-X0mmm8Gfykr8+Yc6LShjUcfI0M8cDCUKLMYeTOQlndiP8y1bzdEysZC/cxJb+dsg8sk+GJedsm58ZRQld5WmQg==","signatures":[{"sig":"MEYCIQCYrBakIMqCzJKuH6FC3d6gjxGbfpIKqZOEUHitC+UALAIhANG9CX+eRr4FFXpk/6IQmji5srnbuBBcdTgMvjB09gRj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz4KxCRA9TVsSAnZWagAAtGAP/1qPNdYeJe+imjKLXFa8\nr094Du5qFIrbgRqfyqFit0l5Yl9czuPlXU50DePPeiHTJRG//omFU/lu0Fs1\nNAMuRHc+rMvhxqAeR/ZOP03BMOvS7pF+DVqBtJQmzTaVl4vPyDB1IZGdIy2f\nvq2JtXa4mPZKRLpUclIZNNy/oRmDZoNSzS6lFFvicRiT2kqr5cDIIB1E0dJf\nvQS6gRzIAI2G/xpgFeiWf6BuWJUHkabWundQhJbxoPw/C6/6YoPZXTt0riWG\nG7yK5T4B+6DzJ8hm8QG6Tydd/d5SxsCVTKBBDEJMBlUEMFBqJ4ryU8gxSBHz\nsdozc8Cfspis+NFu30iqGJwF+6tobT1L17RiXp5tpGY2QdQcFKMcbku2Vc66\n/6lISbji5MuLL95n+LZ4owalqR/DZfUqnNJD1CI1WFnIpq0/ZH+LM9dajFDR\n2WcdQLySgUP0+Ps9NmfTk6uWHEcT4gLsVApMQl3C9XA5dD85nHBMgtE9CZxg\nWyKeqCGj/n6qleGv9hL1T3m32TQjNF1af1NFxMnXLk4LAwyAg++L+4Fnfecd\nPVkIrAgsbBTedoVuCq3Gj5wmxIqnqcg62PvcmIlU/O1eWI/OCQB+67rDJLWE\nNS2ouDvHz/td7BfBx6jaTmWDxiajkddQTrcDkUd9tX5pGARPoi14ysJiBO9c\n3uYc\r\n=tAve\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"b9dddb6dfa9ef5adfb9d5928e76310ff5d28c483","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.3.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.3-pdcastro-resin-semver-1.4.0-b9dddb6dfa9ef5adfb9d5928e76310ff5d28c483_1540326064583_0.46913551480325055","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.3-pdcastro-resin-semver-1.4.0-2a6c69cc70ec8d2d07ce4bbaf87cd6bc4b16323b":{"name":"rendition","version":"4.29.3-pdcastro-resin-semver-1.4.0-2a6c69cc70ec8d2d07ce4bbaf87cd6bc4b16323b","license":"Apache-2.0","_id":"rendition@4.29.3-pdcastro-resin-semver-1.4.0-2a6c69cc70ec8d2d07ce4bbaf87cd6bc4b16323b","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8f398b39b1561a84c6bddf527a21e896f972f9ca","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.3-pdcastro-resin-semver-1.4.0-2a6c69cc70ec8d2d07ce4bbaf87cd6bc4b16323b.tgz","fileCount":132,"integrity":"sha512-la59IntD7P310OlOejH628mYcaqlU9Q5qbriCQc533sorbOwtLgRsaR9BOEp2YaW2ggneK/mirnFvEWxDVRncg==","signatures":[{"sig":"MEUCIDXYSkVc0HuSJdc1NNd/g1qoj1Gihfysdyoct35RV+LeAiEA6VNV6P5DVX3RI+X9WUqkLKTWs8VertESLGoHPpAYKBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0NYuCRA9TVsSAnZWagAAPRIP/RkTUgR/vRYz68iDoihf\nH4JcB+pjm3IYNb6piBlL7t245DSS4D3DnpnF7hFVOUq7QXo7oLA7NYUHkTGi\nNsGF87/ljoVG6SDrS12g4Fq8avvc+lbxOdBWnTozPa1sa/oV/wkNAFX5AJ0B\nm2QW4i/+dASIGlyzT9GfyYwml2Rq/AVj5+zmvQnAyg9QAYdaLNvWP2xydkAL\nbJezcyzCdoub7xKKDjfR1/54l6juq9dn+lvlyJUKq11EDLklvc7aX2i6+wx0\nQEgaMnYRIKfYHR6hNm/fXzyXuwFLo57+r5jJNNZoaSLMkznS3fpbnSwgeiWq\nJoBlJumQohrybhIo1D/QFkaBe9cXK17useKuZLfnLPOgSrzY9Ih6yc9prLup\ndkgm044zbaIQ8zVdn7E3hwzVtiZAEC+Jo249DUxcA1AchbTmJ4zWbbaoTvpi\n4sd/MM+mIfgcUwNq9baGoGlMspL+W1Ex9KKa9xqiozD6uKkMlqBG2mNddKa0\npRQBQiWzWLh9WD67+pK/2GmrPZ4LZkQlIZudw5WCTqfzPRAPB6Ct+KGJPwQD\nHN4kqC5iZLYKbcZsr/l/JA6fARH+rNOP1QbBW9j8OB7QhHV1s0wxmrdoEA8e\nEmss1hyyO2czK82BkwO/arx/uiPijx/IsT3ulTHRc/ba+JX/qxiY33hG0sOZ\nUNax\r\n=eOJG\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"2a6c69cc70ec8d2d07ce4bbaf87cd6bc4b16323b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.3-pdcastro-resin-semver-1.4.0-2a6c69cc70ec8d2d07ce4bbaf87cd6bc4b16323b_1540412973557_0.4625145767767431","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.3":{"name":"rendition","version":"4.29.3","license":"Apache-2.0","_id":"rendition@4.29.3","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c47767a372a67d1bec0887df855d269bf5cded64","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.3.tgz","fileCount":132,"integrity":"sha512-Ht6x2uMDr1V4lqdi61Ye8k3CCQ+EJrQo3ikP87hd2cP5vTNs4pzjmWz6Z+jfLGwxKIZbhRnPmZXdIiGuTNskFw==","signatures":[{"sig":"MEQCICjhxJIGxSpQ/kIBJWnD8M2XZsUnA90Aq1T4Sj/DR6aqAiBE1hujzjTw/Ybo1STwnWZ/NQT2X8S+NvCGF4UYTdynQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":554934,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb1w/SCRA9TVsSAnZWagAA3IAP/0sJW3mxpH+j+tbdP79U\n97rIaTMH/nMLK+/gQST8WEQCydJHwObcWPFeaWqOMpSbCK6J/bYESDdyN4Mh\nIkaQTJ4rFnHjFpLIWBN3puapQ+pfwHU8o/KqhwGVY2d7BcBLMhNLfFjh2rZo\n/aF4fW1SVAAV8Ww7t7WU2qdwqQt1oUKqyFZea+HfOITnrCpMBCUkk0/um2gn\nflcf+KSj0KLBaqbXxfexSIzYdwinD5veNaVO3wUIjZQureT1G6V7Bs2hfZgo\nroi49JX7JQnYUKTvwiPxjjAsYm3eghTw1hqJPDXyIqIDzbmbPfAwUx4rwMXJ\n5mtIZLobxv2NFcZGVE3VdZqK85mqZnjMU0EYAHmUaTjPXuOdGaRbAadg5kf1\nVAJxFAZXGXg+ONs7tEwTeaGgZQLbp1wA6GhGFEChZNgMeEEYWt3xAhs9rYCL\nMjsvgCVx4QGrxkyAwVql8wQP6SFTcCYARXIFnmA/1Aw4S5nP7e+n0p/RO66x\naqvMn3yVwG8uwFBKyFcAJ7ib6JFJZseY04f/ePDvFCgllV4Lo6zdKD+AAW55\nIzmH7uNl+4lyBC7QVguJHHo3jeCQUHJrSCIc5/iYJ6nkA12jztGkyliO0dHF\ne2cvDVts5A5C7ISGWIh9C3KFZG9cus7uAgjoiZMUnZDaGMtNwhFzlGa0BxKF\nrnpK\r\n=DLG3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"39e7bad662e5faaca6f172ed98a8e6dbb39a0eb6","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.3_1540820945557_0.7787963518377208","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-633-alert-dismiss-btn-props-e45eb39615b1885a6b923c60bb11247750324dbb":{"name":"rendition","version":"4.30.0-633-alert-dismiss-btn-props-e45eb39615b1885a6b923c60bb11247750324dbb","license":"Apache-2.0","_id":"rendition@4.30.0-633-alert-dismiss-btn-props-e45eb39615b1885a6b923c60bb11247750324dbb","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5b7622472469ffff6a0947c8db731b90119200d7","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-633-alert-dismiss-btn-props-e45eb39615b1885a6b923c60bb11247750324dbb.tgz","fileCount":132,"integrity":"sha512-8vgr21UaClAeCVb7mefz51oF43vuSgGux6p0IGLVJPnw5zMQuzUUx94cp8KqFBTzCgaPPCF8bWRi4UqHLFWESg==","signatures":[{"sig":"MEQCIDF67kAP50vhOwLoiPgFlO8CSJ5QCJJIBN8yEAV+/CRuAiAjXZ9iJ3k2+tdm7go+bEXvMdBwxB5YZBYa+/V7oepI0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2HiuCRA9TVsSAnZWagAAXcIP/29G5+3Ejc5eZXO4H9wm\nv9XaCQ2c8i3H0i+7B3pRertgtArigdw0Unh2IROC+XFmC4FiCMae6XIdtCXz\nFZDmpUAZ623nUEGzA29WxgdS4hWrTC6lqGdPWzncp1RXo8uLZ8EJ8bMuSPB+\nWvQwvHZnPCYo726pAJ8JAC25jcEQRSM9zTXx12/3y0DGkuwWOsVPdf2juxP4\n1Alry2goG5u8v6lVa/paLaQk2UqqC0Dye6YIEM6Nz6k9V3eLSCkg3dhpivzz\nXAGyLK+Qys7ZFIekRUw1GgtRb9PIX119Yq9/8v/c7UWYHWxbST3jw2TU/Can\nvjAPMX6RX7RMQmlBYgsUSqEg7ICOj4Ec0jD5vJzbwlmhd4d5Gl7TOTAiPMDk\nNSHb9WuLa40MP2s1xJtZeV8YeLPwf9yBLY0nrYQzyCDfuFwCidDkgkvNSTt1\nOfK6aL5B04uaVxcA+27+yXN/FFUmPCGTCGP+OIs3raVg/UxAa0cuehA4uOWK\nLeHOkrfywf3q89DMoN4Ra2H6S/4KjVxD10hyUddL+XhxLlktbpi3mC8XutKF\nClL51hudnzgruvkd4Op/MZkb3O4hlPf4mVEH6We2+u9aFPc6VxvzVaW5pq3t\nVej9DUxuMhhTyqdzQ3nPXIJ5m3gtcUrkOzgBwf9mIIr7gjKLaxwWo1eHj3kD\nhS92\r\n=dB2W\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n| `dismissButtonProps` | `object` | - | - | Properties that are passed to the dismiss button wrapper element. These are the same props used for the [`Box`][1] component |\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e45eb39615b1885a6b923c60bb11247750324dbb","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-633-alert-dismiss-btn-props-e45eb39615b1885a6b923c60bb11247750324dbb_1540913325334_0.9014877981223943","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.4-631-limit-alert-dismiss-props-fc981f4078782f0f240b211aed86604789b50374":{"name":"rendition","version":"4.29.4-631-limit-alert-dismiss-props-fc981f4078782f0f240b211aed86604789b50374","license":"Apache-2.0","_id":"rendition@4.29.4-631-limit-alert-dismiss-props-fc981f4078782f0f240b211aed86604789b50374","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"44cd3b06a7f2ad9302119bd05c671bc92f4993b9","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.4-631-limit-alert-dismiss-props-fc981f4078782f0f240b211aed86604789b50374.tgz","fileCount":132,"integrity":"sha512-kejOIsnApej6UainUNu5ghrRlyC7AunM2lodVXmIiWBro0XlDiZg28qBDmi2XiFa9YEs8rXp+Embb0bfmKJaWA==","signatures":[{"sig":"MEYCIQCW2ZY9DhJX4tKCpM1ipSmDRQUpQwEPjBaAZ7IeGH1veAIhANbNKYRYkUzcuHCFbc2dW2v4vXcCXwgS5injxrVNNDlx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2XWgCRA9TVsSAnZWagAA1oQQAKAyuM/oCuo8ZSgKaSBS\n+P7jIsgk1FQwNwitnpTZD5SzCFA5yASh+6UKHxsN/8UXSbKkBBHmNT3gylnq\n8cpHR4ho46I4R62E2hu7Eog6T2CNxU2l2TsC63XXKIKQgCpzKEV13RYR5itT\nMtBXryyVsdnUWRfE++SQmZ4vSnFMnSZ7W+QT/h3sHzqAWgxHL/2gZpCJwLRt\nu+qVoM1iX78OGJXjl/0ZXi5xTYCLHsCm7qgEv4BWoqQbNZn77I7k4F51SQzA\nVLEbOBfbmoCreIPIvN8DU5YSdXw09QGgUzwKRkzD2v9Z1XdT9b6GysL/L6tG\nsS4uvPmXsEAVuWulI7vlHE3DnyPNt8mFRMCu6iQlfUfdQURR/RsYE5lbNjXY\n45K0N/9hBJYUmL69slUgJQecssf1DVLFsJKPj/VV1sol+4T8AfhXcjFEnl0M\nMun7AVnKPQQCQiy4IT3DXDFxMzeqOOkR/yN99v7klHYg0gklAEDTt7Ba4l/4\nKEHLLp4epCjPOc+Ro4DcRYdNWVC4NBwTnWzvMxU6rz84mg1X34AlWRGMYlyH\nExZeX+Ps/A/Wnnsm5sS7Q9amihRLVVyXv5uICOEHxMKCU4DQk2M3GGcx6q4p\nn0xuk0icGcYlmeKFW4z5cJHQDtKVXjERhbPPH9ekorjOKweDsV27AirqZ/CF\nOsaE\r\n=U5RB\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/resin-io-modules/rendition.svg?branch=master)](https://travis-ci.org/resin-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/resin-io-modules/rendition.svg)](https://david-dm.org/resin-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://resin-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/resin-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://resin-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"fc981f4078782f0f240b211aed86604789b50374","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.4-631-limit-alert-dismiss-props-fc981f4078782f0f240b211aed86604789b50374_1540978078949_0.03832428259998433","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.4":{"name":"rendition","version":"4.29.4","license":"Apache-2.0","_id":"rendition@4.29.4","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"28d7e4dccf74c1026f87d98a6880f8fa71cc41e8","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.4.tgz","fileCount":132,"integrity":"sha512-qIBgm41JBoDt/7BDLdsXJAHfQRC2AByw50TS4AefV0vrYmzLXhNorqFBzvBNixOhMOE6SyBabwhRM7xfv/jO6A==","signatures":[{"sig":"MEUCIEFTPX3rva+WE+SvpBauu9YZS/EgO/cYf8yzwKZomx77AiEAz6lPlPGOZRO71uq61Lep0Kkbb+7VBA4R9o5f+2balDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2Xt5CRA9TVsSAnZWagAAuLcQAKBcDOL8z+FB/3HrKhYY\n6ZykfZx2H42ExzcUqQKIzFkHJ42d3hCfixRGSdtgZl2YVZmU5crjlN4GLIuX\n07VXRgxwF2UvoTCiRZcXj3QG9DCKPTNSakoXY9IApQJ3gAdxrMGL1Vea4CPf\neHBCGHgekVIsKa2tBCI87Ki/RDhD/W0fQnIjgKRtNRFJaGdO2Vvkyy/eiLf/\nKiolgeGeCmgoxoMpj6z6ToJjVU4Oruar6ElzNZ8sGmbhhoOIc0wkt6nyHvZp\nExcI7MGnGTFg1R6bPCAbvuizEPctybJGJEj0RGxTst9t2Z9PkrQeHO0+D4FV\nTA0/bCxdbOb2o17l4PSIwmSvmGqvsybp9kqfEI3pNnkTN1CJnffo2l//t98Z\nd8ijyrraZVrmbieDDYTVqNQxnlGjcWY9fagroq2wYFJu6bvACzKN6IUzpAdx\n1ZdkBufH7D88JmMGH9BOl5+WZ7oY3Mm875VqysUzbBVCNKa8ic2npPSm8i8q\ny1Vz+GYAh3KwQS65CusJsBO92LZEpVnTsXIF+a/Q8GlYuRWl35dDSy3G9rHO\nDdlXFe021hNEKWYTPCfG7pXoO0zQED38ZCNpi9XX1w9hR8mUX5oNeq9O5wgb\nZsaEC8SfNSBl4K+TB04mWgY76KoxG18hFa3mbqmZZx2JAZTo790qopUTRvPa\nozZN\r\n=8v6o\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"2458deadfb62424e405eff8be6a65cba889172b8","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.4_1540979576056_0.41867051258438126","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.5-rename-d04d7b1a8d9d72dd3e2be66d85ccfe816f0c7daf":{"name":"rendition","version":"4.29.5-rename-d04d7b1a8d9d72dd3e2be66d85ccfe816f0c7daf","license":"Apache-2.0","_id":"rendition@4.29.5-rename-d04d7b1a8d9d72dd3e2be66d85ccfe816f0c7daf","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"161724c4effc61c6623142b143bddeec0a65ec35","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.5-rename-d04d7b1a8d9d72dd3e2be66d85ccfe816f0c7daf.tgz","fileCount":132,"integrity":"sha512-XFMpUS/I5Ezd72rCLXTlpyfQeaCRPxHWbkmeXEubRi7aLpgNSOoMKH2QXh+9WMWNUqYSGhIuvRtm3+arF5EEZQ==","signatures":[{"sig":"MEQCID+pNpCYxkBYHtV+U60il5G6itVg8zQ9QhlqHKh7OhAyAiBYeLf5gOwWUfDLw6qxZYj4atDWrEuFrUkrkcRtr7x4xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2bpsCRA9TVsSAnZWagAAiesP/jZav0ZgoEHdetqVU69L\nrijwGae3yNyI6FNE6OXnySjQO5DER/lRVRFHRD7XxjqcmVg98GoypWwwyv46\nCMXlsbD657k2DZ4LpxKopjZpf9JXzq1KQUF76h7g+rN0bKl1CfCRjC0cR0CN\noLn3KLkmXVcTyxdwG1WagdI1zk2qbFHnsgRYvD6lU/SR6Wll4dNa+qntMXHs\nlenUQmzWMmAU2UA/VqI5xfeEqXpTM4lgGYCyksYzfL4tKnmHlt73Dp3tkDF8\n9m9vAI0dZXEWJBu4vnMWrdF0ffm6y9bv820KRM2rn//tvxdbLaf3Ft66DfdA\n1b2VRT1sgaOCLw3ZSP2kN605NKg41Ydv/Rm1Cd8zgtnoe/tcGFKfSA0RnbKx\nFc1sa0tCtm1ngYpnDA/jftIjmYW47J8WHom2VavLAjNaXq2eqCLzA82z3ajs\n1vFt8L6YZlcitxUPDF+anlkcztHwxqfvpf4qhA/X8ir0wgr6uSpXCebPJUeU\n3IePOSb3Zmbqy10mYBqrtM8TzdOiFESDrZFUHtjJg1mwUM4IlDXuQOkLxE9G\nkbZqqihA2TvGZ02Pa34syINRCVnykMOfyMpRHxYyt/bqktK7ya1Rhi3+ujbX\nZXtg2pc7vyhSn6uxZx9nmhWyqw3i6xXGnkm+wNnLBwKD/0vIOkZkZrQbYl/1\nXNRp\r\n=7WOH\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"d04d7b1a8d9d72dd3e2be66d85ccfe816f0c7daf","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.5-rename-d04d7b1a8d9d72dd3e2be66d85ccfe816f0c7daf_1540995691404_0.06031591179574791","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.5":{"name":"rendition","version":"4.29.5","license":"Apache-2.0","_id":"rendition@4.29.5","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"a2661852652b586d29e44e72d19904a39bf812ff","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.5.tgz","fileCount":132,"integrity":"sha512-uHN+QJxTwomUGZJB3rB+PcN6Dy5x3Wb8KKxUgY4bunD07L2TVzkMW62qJ/yGWdvyCc41gBOrcTz/+Zrhxu1pYw==","signatures":[{"sig":"MEUCIQC4BbF/OstIsWaLFn+pODhEfAnlwd3QHrc3ml4riKRCpwIgB1y+BYtvLgTn+WNs2kwvOFbUA2zHdH+dIj//Ed6Bxeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2cfwCRA9TVsSAnZWagAA0iUP/jbp5CkdNIUKpLMnwJ65\nn8iGim1FcunKJTcn4MRaioNI/qSVgCVALXWmGw0DSGNs4Y9UfITf1IFoPFNj\nAdwby3mpdzoVa0fOwy8T6PUan/RfqKYowOfR2T1m4VG4UkP8vOtntSX2Laan\nnDjpcpeyhGM4vVxcOoBrmSE50ndHzwC5VutcY7ShfuxNZzOg9eQDuRDaLbpo\nmDKtUSCmExLZHgqX7FKMLE2I9HixJSCt2HXh3zt3HcKsKaMhkgMZT8B19utd\nyxJ5s0Ozudm2bzaea7VqRnregD/doL0smQ6aHvRV6xoqHzo1v3xNBg+hNjSx\nzcEx58HUPcbq9xqqU3H2bBmUH+xkZbL/Do4ekwztPdSAhcV2uztjVK/iZKu3\nRputuu9Sed0TyPBHBOO0LY8FNFEkyfoAle2Rty1FNU4yZyixQw/b6RvjRaWx\nH7dDmizOSN9KBsCNXRyoRCdVAtXrg6dVJJAATnjo4VQSe/LQqhexfQO9HIhK\nqX4paNT+HCdpwDyS2ao2E1/0CR7JrrJXcsYGGWB+6gAcn6xXB9xsN6QECAk7\nwjGNgU0694iX6N7T/zbpxSdQEMpXsK3JMZbmLEP65RRju60bOcfAmXegdVtY\nBscboiji0jq+vv+eDk1NK2RyQLa98L+1aUqNyg6IRxWyGUS/4OnecHCydUxH\n/AT3\r\n=RT/C\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"3705bd2bd99bc96d3e1bb23162f80695f012b540","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.5_1540999151002_0.21781841737229368","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.6-599-form-field-title-1814359f582f4ab653a53addef8e5ecac21b0918":{"name":"rendition","version":"4.29.6-599-form-field-title-1814359f582f4ab653a53addef8e5ecac21b0918","license":"Apache-2.0","_id":"rendition@4.29.6-599-form-field-title-1814359f582f4ab653a53addef8e5ecac21b0918","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4a120d0f84b29dcd9eada846deb163126e849caf","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.6-599-form-field-title-1814359f582f4ab653a53addef8e5ecac21b0918.tgz","fileCount":133,"integrity":"sha512-a4s6QOCNKaTsVOtk6aJX02woJVywF9k/bgI+XFvsacSaG0c4Ci10SmOfJXCI7dUNP+23V6/l5ZrsjqY4VAMu9w==","signatures":[{"sig":"MEUCIAMNRZBzTsuVaNJvAt12PH1r1mZhKD2BuXFJ+zCwOVkuAiEAjfYdswCDiDsyych751WZ9HPLNTXqkBKWainzD/Eo2cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2c2ICRA9TVsSAnZWagAAoQsP/3m44Ii2WVzjRrzWHKry\nAy64F3GNUJjtdOfnC+TpEGaBrMRPkiG6z7uf1VYfS0KG5g04TYoh2bJdzIXU\nN+3T6tB5lRItDlc4NqeeIiqvG93felzwKrVk+3LXIRlE9CSxxzePeI9I5RGQ\nPqnnc8bAaLw0qJe+IGn6pxG+WOxoWz7Y+EBUUdYxyn1CDTA4zDMv8oUZIAMc\nHULfgnS8iPvT7v8C6cFvFoPHsuCkylRqb+7WhdoSx1NF31x8IEqHkO50drCF\nqe3Hd93fjtXYa3da3JMy59I46iBsu/e2kIzlKpoQEYKuFE2ILzTxYsMVQGIZ\neO+fz7UIDwxXO4VAYpwrhetiIuKxCe1aAt/1CuK+EyBWPd8La3eIXxb/kev7\nuRgp3MvktiNbLg4N3nI0/9qLiHtYToY0vmaYbcMELoFHEq7j26KuT4Tz3E3g\n1Ey6tueY3hB7vk4BTNBWaZh698pjC8bdqU2VUDj1zHdbclwpNtd+qp+zCnnV\nw3vh3vb5UKnDPE/3ms0DbYtfyY6Naa8TlMQri1jTWZPm7iDKZqWQDZxA3ac7\nSV71VX3/wysOw7rZNr6UbmJ6uDQT+gc/WAxfPTBCk3c04BJtl7wKE7vbXFWu\nQycM97pfEiHsDHG4qcaLQ1NBuCpMKIlUCtPrjZ6LD+LnlpVPeW4k/elBp2KM\nriVR\r\n=Q7F0\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"1814359f582f4ab653a53addef8e5ecac21b0918","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.6-599-form-field-title-1814359f582f4ab653a53addef8e5ecac21b0918_1541000583683_0.6911641867199847","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.6":{"name":"rendition","version":"4.29.6","license":"Apache-2.0","_id":"rendition@4.29.6","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6e5310aa07d0d0fd1560f7eea4f3b367048f24d3","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.6.tgz","fileCount":133,"integrity":"sha512-W9FtWxz+xJIIcVFqq0Pce93+7z4oIE7I65pOwmdpRXkqkkOKe3ks1sqdRZOXd+/n2JWHoIct+aSjURMp8csFWA==","signatures":[{"sig":"MEUCIFmgMb1LXY00BIhZsnyEXUoo75Ck/VMELUBX6Xyw2ne/AiEA+KaEIFkGhbzoLTzu4C/sGxAEPVH8BSjzNvf4S2knAdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":558004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2dfcCRA9TVsSAnZWagAAsi4P/1k3X3lp1g3LPJKCGqJY\nyC3X4Kgc8ZjFVw/NKDYf/SP3UBUgXsQ7k+LUqXvQmg0oP84EqxHa2N1ehcZC\nHLKK5jRELTtVmojfGkjQ+Lo8UYqm1/p/FtsbhEhubPkPh2pKSkHdaBs8yV2F\nUjjAbDxVHgZp7txJX2+1OjzSoVAp62QQ5apUNfF6uug0heLFz2/e5iYNM2yW\nyrVPgfkvW6+HhhMRxLu3yzyvR6dLYgq92yFP6VbS892Xa9jIEXYNyrxf+X0x\n/NGpMpq86RSfU4tsj+ygwQjuEFiPbGopKrBF7qqiPQXIsrFI3ivsK02iuW/z\n3O9s8H5uhTODuvp+doQk/+49epYS+CC83SgKX2DrlyQUK5cen1AAVHUENTZu\nTSyzM+S76o9UBizzXRsvAvGSpl1su9bFxaDv/xVoxmFj7WLEEz4s4HGP+Le+\nm0o9CHnL1ZuGiukjXNxd/DVXG/1V+XaM5jVq+6pWALblprdKZ37DQ8K3laub\nHtgWAmgW6bSyrVlPPOOAnSwrvMf5b/hjWViamMFYCOSEL9YFEihyFgxVVHbv\ncR69oBLSHvdBXPhDVISZk6gEbmTupV/DB0PcyL0nlV/Wo+NMyJh51UYpdTwA\nDNuw54mRH/fY9wk5adhbcTbHuABTkr2EDjFWDW770V+bLlYR3yHG+3a7SYXF\nWEFk\r\n=K9tp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"9f924e75b1a38ebfbfbadae6c4b356599f8ba1d8","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","build:storybook":"build-storybook -o .out"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.6_1541003227143_0.48275440234502587","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.7-593-visual-regression-015a25c98bb37f8e5a01954a6c67c6998f963da5":{"name":"rendition","version":"4.29.7-593-visual-regression-015a25c98bb37f8e5a01954a6c67c6998f963da5","license":"Apache-2.0","_id":"rendition@4.29.7-593-visual-regression-015a25c98bb37f8e5a01954a6c67c6998f963da5","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5673f386e9c50e3ff12d064360a4fa2a8f49c6bf","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.7-593-visual-regression-015a25c98bb37f8e5a01954a6c67c6998f963da5.tgz","fileCount":264,"integrity":"sha512-tfJbcqcPzggsM6qfvogWyIXEK/lVY1OrnAgczjCdhN2haQ3W5Ox962rk8zArksOZQMcEgrtPi+yE6WNYu9QECg==","signatures":[{"sig":"MEQCIGNYRuRf4OEKZhZ8PMxRZM0e6++ZrH1R+LrVVK1k01/+AiB+cl2pydcoR6cLg5LE8RJxD+xumbkipKKpYGgXdk/R6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3517657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2vzzCRA9TVsSAnZWagAAAuUP/1ZA7LKfRbted8IsBa02\nnuEajxqpJXz3UB2X283j7jNPKJfvWpc+tin3Dx70U6KjfkLeGZeEpFgjR3lv\nk1hY+pN85ohMUvj5U6acbZ4Qg8g97WnH15VkGt02uZmGymHfaBkSi12uhpWx\nnqC6D9+BG7K+vl6N653ENLzXFX6tmUSVFK+T/e1ObtJn/ar3h3gAASp7EKPP\nr6xYXtvnIIX0BorCWvBD3aPeD7hQkq+SVMOaTmLqP5x3+5MExCg5cWcJfQKr\nhOxq6uecICzQA3jSxNqWwVFQ4XMVTDWz4syo1h7sbLCox9OyZeykD4Cvh22k\nkCCQYwV1u3vz1gmA5yIdXmCLRTM7VL0YJGQT6U3je3l36GGZEgZk/CShgW7D\nDI5DHNRnnbPWpBh8cpwa5ByT+nRJ/ijM6zti7ifl4z6Z/csGTSmHPpNuEnAf\nfYNMCawn+TLDhSw/I8YQC2MTGWSJeEDiVHVPBLktKtu/iG37fVf6NaZBBufL\nnrLIrg9fZmRr60d9arGO8xdJDefWvITL4quo6pccr3XoEElpjW5UY0BlMjeV\nWNrJjecM26vbABUZdULXXOKEBUG+o00iROFduWjGl4ejTXP1/Cd/uwreZpvs\n1wEhAsYcm9sBsQLuMwRqAkkptPn94G9Up/bJ95UMe37ymfUas+K6SNjmSRf+\nxzU9\r\n=9HQu\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"015a25c98bb37f8e5a01954a6c67c6998f963da5","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.7-593-visual-regression-015a25c98bb37f8e5a01954a6c67c6998f963da5_1541078258561_0.9338720597863202","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.7-593-visual-regression-3bef9778521f14c57bab9da1115bd5543491f902":{"name":"rendition","version":"4.29.7-593-visual-regression-3bef9778521f14c57bab9da1115bd5543491f902","license":"Apache-2.0","_id":"rendition@4.29.7-593-visual-regression-3bef9778521f14c57bab9da1115bd5543491f902","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"2b17216a82d2e32691797a1d27da27258f4ddefc","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.7-593-visual-regression-3bef9778521f14c57bab9da1115bd5543491f902.tgz","fileCount":264,"integrity":"sha512-xAMhQEXmHHA1CROtOfcbinow+rUYpZUZvwXeLX0OPkxOUuOEtIaSqWbOV3P+OzdLYnqrGt//Vz78rzReqNLS3g==","signatures":[{"sig":"MEYCIQCVznVD8NJ6PHzIkRzhRh+UjUAdseRz8NOLFW+AyFTgpAIhAKacmIR6opwh/8i30Ey3s3OqB8bTR/BoBbsgdSFl2vbe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3517630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2v3aCRA9TVsSAnZWagAAxPcQAIbs6uApz0p7E1fWcNXK\n6p5kw4IXAFhkANjg0Q1EEUswhHoTB+VAungtW51F6PNVhuBsd1L3QETNyxuF\nrBz9I3tB8/Zlcd3MAjv8v5fQYMxClxNxzYquvU6QUxEd2Ns2uSZQUxkmyZWl\nhlYy+8k+z58EFEpk/eQnKFpjPL4lt0osah/d8dwP/tbgpq6mltJKze0qC2Rh\niqpt1SSFMYWzgJxMTStSWRwWsGmwojBco220rqOrZ+2OwkWX/5kox2obj+yD\n2ofWLmXgXlOKgPvup3QhRcIOhvCSKcs57W480QMA12oUa/CE6QUwdM1rpOw/\nopTq0uMYBgCC0ZVz3xtHhq6EOBB0iv3cQwA4QG0bqbOXeehH1oTiAu8dzHFY\nUEQkiojnBtmzZMfL0hmLhow5xBxx/SyBKP2QeO55zdoUw2B86tcPMNuLFxOK\npjWp3+ycIUakY7MWJCN22aeL09Xk5Ipi1JEt0N29Gx2Dz1fyBWrKxDA83nYb\n3SBnm5UfK3nuI/4frruVmOrYlELWBUlT46BJ18qdb4rrCr8LDdd5vgEdaAfW\n+iRjZTsMf+PboRGpEA70/WBVQOSA4UFZFB4MGCequFVb6pjFuSYuwWN077sW\nyq40+Rn5ZZ40vpkA5f+yv6XGH3AUhu0WKObK+PI4vnkLysjlcXTbD1X1eC2u\nVN00\r\n=t5qQ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"3bef9778521f14c57bab9da1115bd5543491f902","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.7-593-visual-regression-3bef9778521f14c57bab9da1115bd5543491f902_1541078490014_0.6478232048009622","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.7-593-visual-regression-b27fd22a8fd61945552bc021c8ed48e56cebdabb":{"name":"rendition","version":"4.29.7-593-visual-regression-b27fd22a8fd61945552bc021c8ed48e56cebdabb","license":"Apache-2.0","_id":"rendition@4.29.7-593-visual-regression-b27fd22a8fd61945552bc021c8ed48e56cebdabb","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"93347b6c9620e8824de8e0ddfe1b8cb3c4ad5545","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.7-593-visual-regression-b27fd22a8fd61945552bc021c8ed48e56cebdabb.tgz","fileCount":264,"integrity":"sha512-RQE+TJlx+aJxNuMofd/27tD3YvI8U+dD+aX7SWsOTxDn5OJSNJbPXlSZR7lbJJCqOxxJ8l62BqM461UuS5hlVg==","signatures":[{"sig":"MEYCIQDbE48tt9hVW0D/EPdkJY8a7c8pJcGgcUlvzeY0EA3hlgIhAOoQvzaUtUfHnBOlZFYFLejgjnfwAKRLEgw5nEvUqTOx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3517636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2w1BCRA9TVsSAnZWagAAMpcP+QCYONhl5YWU2GNJkpV9\nwYJBSwn9HGC7HtgEEaKHF7Zh+iogEwI3tN7OdcyYslqdGsD4ijzt2rwFS6/6\n/B7H6+3OZ3hTB8z40wXAZUvw/pDnMqVVFhHtI/4jPE0xokiW5UXBDKlAHXls\nCqcZaaSprwnkavHIIf1gsocIVFpF3Tmkev0LWy+bDMcIB4RB82ey7N9UuBHK\npDQt1YMsC5LfTgE2PvZG7BQ39NzPfhG+LPRxl2KvipJvtos/DthRsc4pYUZN\np8DqnzUia5+PspK7Qr+PF4cEObJnPImdy39b8MdTqVPfQB4GKKtVpri/5zVM\nNmVilzjPB9y7PlsrwIgNABB0ESLLCxYhWU70Fc9pla8udlr+0PiqxkPUcNq7\nNoYUL0JK3de2KmPn19j4tCJ+mff86OE6lQXHcTiE0SCyRl73ITjJ07lMERUR\nS2peFY0E3pjN6yOVG9QXlGL4RL6D2VdkXMKCV3hrZV5AmKrCz4pPFrSi/+uc\nk/tdBz2E5U+LPh6B7tw3UhxOmN837BeMP0Sw0hASnWThkypn4rX5V18HQJ9d\niRRIKBZoTMJR5F3v14fP8djeoAveetI0IHBTDiKKmHbKPf4ycnWCqZ4O574g\nSCCQjgxvD2rG7+8N29l6PXPBlxcuwHUN+pcW1n+PLlq/QAg6ohmZ/Q/H2OOB\ne0Yn\r\n=/1Ph\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"b27fd22a8fd61945552bc021c8ed48e56cebdabb","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.7-593-visual-regression-b27fd22a8fd61945552bc021c8ed48e56cebdabb_1541082433269_0.39784445912626887","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.7":{"name":"rendition","version":"4.29.7","license":"Apache-2.0","_id":"rendition@4.29.7","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bf3f59a38dbfc4365a916cf53bd5632ada278f28","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.7.tgz","fileCount":264,"integrity":"sha512-NmiqYDJBQrqJslAs6KBkZZhzygQ05pYyxLmJiGCkVBKWLuYwTuo2FnPSYLwVGiuwhbxvPoFgxmjeTuKdopl0ZQ==","signatures":[{"sig":"MEUCIQDSosxG5z0guO8WM/Yv5oVPFCEDgBRmcnQbGzQVLzWewAIgEoGVJNhbDkX5tPxmdE/KLqeGcbLhAta+U+yX8/gSrpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3517573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb2zN6CRA9TVsSAnZWagAAgdAP/2Hd164tvSt6Lc0j/U4Q\nDSxU5Y1ZNoUTFx3ccu8WLFKBDMcJG77+jtW1BwUnfh4fyzpneZdRVctb6nAl\nOKEAmKljCiBzUM+MEmjEC2yNg8WaD3jaywrQ6hSkp3esYCFJfjIhse+KC/oF\n24Ly+9dwiVrv076HYbLNJQHlWWDDRMwADJ2kwQb0tnwKefjaSYH8q3roTk7j\nMayN6sh8ScXO6kUsFU3UbIzmZJHpxfAdtGZZEAXQWBZTTRhDKeUP5FL9XTtd\nkykI/wDQZOr/sCzxcNRvdMcvFtgEggfL8lBs17lJnkeQNJOrhMoBEFT9mtWK\ncTwFaEjJ+wh/CfSw8veDyolGQFWyJzUKC0dq3zYAjm5bmXT8ZKfAJr92fSFA\nXzCKz4Qb30s1iuLmWL98SnYXVnrQelSCD3/9ndTwH1H1Bi7AW4W6rPKvcm/H\nUegd8P0GbV7+eoc6sNS3ZuV3GDnhJNutjQMLdx/r7rHExmo85O10IYDSiF8E\nKaCDYPR8754inh3y0lQgaom6BeALyE/pnVA6nEoATEcVj4AWu4mQEdMpB55O\n6p90MS/GdkFjMrYSoNw69ZzBS/B6poy5vJe+9bUJEn+M+7y+ESBlzWFyxloU\nD5eQFV5DejOcN3YFIG6TRPVeNmXExpoeWrgz4qVEURI86xZ9FhjxG/i1Z3Nr\nUsET\r\n=uSge\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"a08911aa103cef4e24996db9e2e016199922275c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.7_1541092216597_0.3014357897996396","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-267dfd08392350c25372c63ceed1d289184ac99b":{"name":"rendition","version":"4.30.0-arc-slider-267dfd08392350c25372c63ceed1d289184ac99b","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-267dfd08392350c25372c63ceed1d289184ac99b","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8acf47e59464e58fb64350e427206966425c3c0e","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-267dfd08392350c25372c63ceed1d289184ac99b.tgz","fileCount":269,"integrity":"sha512-atFK6dih/+hMpqwR1DQ9VRKqcM1h9xn0Fq1K+NJW/CjRI8jqAjsvy8+vLY2Xc3ujJm/4p/W2FyN94j1xcC2Rvg==","signatures":[{"sig":"MEUCIQC/8NrkI1/V6zSmcki0XkFBaVERYruHY0OUOgces1NG4gIgJem4/y7JkQhztHJRuEZEfcoEF9+lab73LTn+hepoHhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3577796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb3H2kCRA9TVsSAnZWagAAu/MP/1NLek0rqwmGx3SS+8Lq\n1pGJkJ6lu7T14bJTlXus0uJ0mjaK2PU9e85WH6/zkW0mENdBtN6owSx7Pdqb\nUxJcyUciCYIzeoTKy2xMhdvuj3YekLFw6fBy3gZHhQlVwRf4kbHwjI/iyyfv\nJAdto7ynXjl3uNdFoa+pdc0Vnk5UwRRRnk7VpocEuSeLg/Qci/RKYeorAnMm\nLEkAZzEW4zcn55UCVpN4L5T0NAFcDLLxTldIMwtqCMvxhMLPe/IRk5IxCmB3\n506NtriZd91uGrTvvoXs2WXSbDEpOJjIdxE7boK+lLkLSanv+M6uz6Y7nPbQ\nBY3oavygI7i9yBWOl430202wQOzPvcviMX43QY+O3TnzEjgW3NzsfvOs1Tb+\njDDzlB/h6ucbgwLVEXQWRrXlu6wAEmHyaLD+1AK9rDV9QSJjy8gZ/UoIhqzP\nOQl0KWN5zPaEoFtYrH+uTmZ+xo2aDSUl/HTqq9fokOtooRsAUlOR2Pd4ASpr\niwi2S8WD7enQbJyB6ZQilEa9aVIPXfDg4L0V+fesI820XT7Foy09vYA6Or10\n1fq8ttcuPjr7KE9EM1ZS/AAmdnr0oNSw1ItwL4HlGso91niVeUukutvHLVUV\nBlJEbelidw9IgqVUlkbEUg0vz3HiR9WWObfVvjLrvpJ8ogxYTfUW5VoY6fb6\nm1BO\r\n=d/0m\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"267dfd08392350c25372c63ceed1d289184ac99b","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","react-round-slider":"^1.0.1","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-267dfd08392350c25372c63ceed1d289184ac99b_1541176739616_0.37493808828137354","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-9a697e7adb7828f301fe8dfdd9b1791823800807":{"name":"rendition","version":"4.30.0-arc-slider-9a697e7adb7828f301fe8dfdd9b1791823800807","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-9a697e7adb7828f301fe8dfdd9b1791823800807","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"51edc0f497e262e103ce196ed31505ede31e20c0","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-9a697e7adb7828f301fe8dfdd9b1791823800807.tgz","fileCount":269,"integrity":"sha512-mA3eVpYCx5a6zfceC6P77AyQEH7GUXhUIuorzOg1JupxW9Oy1S0UToGs9lzBlHSFc2BiZoWRCipWltsdNoNGUg==","signatures":[{"sig":"MEYCIQDWAkoGkT9ELKRis7IM12lJw5ncrR9C3yE/8aDW/9st7AIhALPrq3vwln+QscbxvxvvNlakUn1QzOPPPu8SlVkqS0hk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3577796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb3NPWCRA9TVsSAnZWagAA9FUP/0fZ8uBWPUal5CDwp3+W\n+LC1puVI2kM3zyOiEPeVSdZJeouvO8Ek3Zz6QF/l5BRTmiMeMgd209OxfqoK\nA6epyCHN1HUGmKQmNeT1psUmfyQ/QTdSiJRm+bQrTNX2xanKdQ6EWu+Cv7LE\nqi0VTv2U7kZVoZoj/2XRorF9QzSDgxVuyai/t6TXDl634VPzbdGJbMyWi1rN\nnx3bz/oYsskQydHpMOdPuCsc6v5mfqFvaldU04SReQNvAohOhzEyYh7VF3Yr\nkLbXr9VniWHwmTz8qVKkame6HCWhpfsVjVSw4tHdWFUzT1gGeBSqBQwAleI9\niC5z+y3lNul8+lRw4Akw6nyUyOlblUpNlqvkPK6prZo7IOtWm5oLQHflkYWn\nTVH9LDyHHPK74c0sPn4ipjrhMiMGF3UIhS4vlPEqB+lsM/x11NlzPfIahRMt\n1F74jlZVj+e/tjjvYwWR5xIEfuUpb9cM9KBlT+b/QmCCQ0bkN4z82GaIeari\nwPigdr+2ytKgSAe8MxtT1tAbVWCjUXqxrPMASSN4Gb99GzLZsV6gF4j/lXXX\nc1E3COJNLsvYy2P/SyJDQGNy4Fidu/R/5Xhig4RDp35J3EM45EVY9ZNsyacB\nHUqGa/h5PPBdjL9KUsB0jAmcL1G+c/KI10LYiRbhfn/poh79mfIk1YXlNg5d\nLP3A\r\n=gGRk\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"9a697e7adb7828f301fe8dfdd9b1791823800807","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","react-round-slider":"^1.0.1","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-9a697e7adb7828f301fe8dfdd9b1791823800807_1541198806101_0.7096722903508692","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-224d994bc7524da0eb8dd94798b577988fed647e":{"name":"rendition","version":"4.30.0-arc-slider-224d994bc7524da0eb8dd94798b577988fed647e","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-224d994bc7524da0eb8dd94798b577988fed647e","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"9a679fc09bd68e494c07e71c74614902105c84a1","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-224d994bc7524da0eb8dd94798b577988fed647e.tgz","fileCount":269,"integrity":"sha512-pl7caUm8PDkwvixZsu2CtgNtEfnS4MKmlZ72YrExeo+g30Nj6TSe81UHCB72p5idTn4l/GlNgl9empL0gX1LHQ==","signatures":[{"sig":"MEUCIQCOExOgw0qfiFZ9HFwzKspVttQI77ItqGJWwnpSlK5heQIgLxW3NJMqmvOTykVZP9YIIye4zVSqxv7YjFU8X7UzHQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3577820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb3/1aCRA9TVsSAnZWagAAW6YP+QH7dSF71TS8f20Uc6nE\n6nSxpQVPjo2Fr1fOPFaxuITWlhmYLgMdTMWgT+JOtR9aU4YgprkoYpFmgd0L\nlxNrUetyq8U2V/6pB90efW38z/xnuCDC03KJdJC8eKHDdxhQo7jc2aOkJBxq\nVdIQsPoB0NlN58DWrlimB+LgdnsKmgh06PzKDTYOSKn5S8dD0YScPH94CzSp\ns8ia1KcKJ3CdmOQV2fZ/e68k75w3XAl/glOvLZcNU2255bTId298HCVRjTxA\nSw0dw2kFYf8PU4hhLTGL1fE7nL+TmGJ69EFY8A4ahhB7gzzVDfCCOr8JQ9mB\nMBgSrebKFfLQGzl0QekfvTe0LaIJQMBvpMKmYnCr2Usa4IlRIyM8cvrXjBIy\nJBk00c7tnrQdwIyjKKEwAwvDGIKuzX/uaNPo2yvL0X7KPvqRf+fFKmVvroYi\n09Z8NcPVlbNngUnC8MCXulTh0L8XuDKHQR3+yqCkuDD8OP0UmGU5RK+AyS9a\negedKqj4IyGavP0Hichhe3DEUwkpFPWPwe4FynXh7w9S9pyGkAOzVuVlk0kY\nTWu9AJvEeRivYJK9oD3wT6ufNayTkDCnOtKEIwnn37b85vJ6/owhq2a8bWdf\nf7A6w+ts6v9+mvwk8FuMY6dEeVtXvZKfiEpmtCjThH1qQJ2AIeXUdHirxbbf\nptzb\r\n=PJCv\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"224d994bc7524da0eb8dd94798b577988fed647e","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","react-round-slider":"^1.0.1","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-224d994bc7524da0eb8dd94798b577988fed647e_1541406041267_0.20489015342716943","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-7c4324d417f22dd8574c84024e898d5238200535":{"name":"rendition","version":"4.30.0-arc-slider-7c4324d417f22dd8574c84024e898d5238200535","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-7c4324d417f22dd8574c84024e898d5238200535","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1cc28a2081e890b29bfbd2945c6c4c306ececf79","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-7c4324d417f22dd8574c84024e898d5238200535.tgz","fileCount":271,"integrity":"sha512-k94Y+3ZRxGGChVNeJwPGlbTseuUNxRqtDByh45lodPr5Hb0D5Ew9sVXEnqIGG0cdxwdFAJiBiWAnO165zAEuNg==","signatures":[{"sig":"MEUCIQDpC/b05Au+OLNwRDV67Rh25QHbgi9RGG9Zdv3QsTIOEwIgO1nPDyGIu8p93TrBsrRyYOPBqXbTnx15EiLcP6nrZKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3613005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4BmYCRA9TVsSAnZWagAAd9QP/1iBLMNDRGz1af27pt8/\nrCwXXyamNWdIhqQUwZjPmQYcxf1hemAXsUbnValmmtOxXEUzdw+Lc3O8p90t\nrVxLZMK+86jHGCVkxWpDnLpMkF1hrU/LeTpZeIv0MUKW+pVcBLgrS6zz1fCi\npOCHK7ASnovDN3RG8gKtrpCNOzdWVrinOMtdae4iCeVNBawqD2SDZnpChlkc\n3g2H5OlyrmoP54e4DFGdd+AoH/7rcbzy8EDLBSBbEynBT0pAeIUy3QWT6/5u\nLow3s6k06dYY8b1qVrMdA+xBbMV43f1t1JwKF/HDxupqKiY9GSNatPrIZSyT\nOOwR9/Zg7n99L0Wtd5HmQs6R5DVMvuA9obfnB5H8hO50q6GiSdFcIJlYhA37\nUzRhHB5E0jSzshGtj0lUdYfVDcSrm/UXUIQ69GSDoFuujVCGKn9qVAwqtIHx\nTnvMwQmkasT/ZjVrGKIIKuvXgGS1fgZ8CoqV6oNSbLEbOTv0RDm828vws4Zy\nNCWSvB/GdYWUY3KfHSPk0LeRRaGgAsgRvBJ9BjOkYP/6ZWqu7HBUYZFtsnql\nSA5P5ftXDsPHWmFsau/JZTJB9QjuFOnDnM4tAgQzo7+5CPpqc/8rpJzfvX3+\nF+cE2qT90EWKtVLA36bd13MlJqCjI1l9FNl+QWacOGImm4bE8EQhXgZUdo4j\nVn9S\r\n=IPul\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"7c4324d417f22dd8574c84024e898d5238200535","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","react-round-slider":"^1.0.1","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-7c4324d417f22dd8574c84024e898d5238200535_1541413272041_0.3404104492822726","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-96f27d78a1ab868320bd6c673b20dd411cdeb2d5":{"name":"rendition","version":"4.30.0-arc-slider-96f27d78a1ab868320bd6c673b20dd411cdeb2d5","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-96f27d78a1ab868320bd6c673b20dd411cdeb2d5","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"470d4a9f684b2c3681a3784a5d1b9c34b5b011a5","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-96f27d78a1ab868320bd6c673b20dd411cdeb2d5.tgz","fileCount":271,"integrity":"sha512-N1F2+oNZXzd8xqGsOJEePQ0bZUKKmArUx4b72o30L41uxc/6zkUIOq+4gt/hYL8ORIovxf+hJiLgJ4EyYyJnKg==","signatures":[{"sig":"MEUCIQDUk81ZsblXjko2VAmNuD5ppTMuqq3BN8pkaT4cAw7CLgIgIig/GLe6ybH9L8t5m5W+OauA5LiceibOUlQJERSWuUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3612807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4COPCRA9TVsSAnZWagAAnSYP+QEj1NhOp1lPzuW3xWxI\nMd9f7nQ9CX/A00Z8c7D5bEVSQQWyztVWHDiSENdmTR8DlkyIho5J+wYLXP9j\nk/tunqdWzv3KbbaironCkMy83+il3mS+HwOdf9fnLCLvY6YCR/KH62+lqLFA\njtKsSFON/qI8GfTm9STvd0UVwR41DNrEBvw3YScImFvSdFRGeudqKmckt4Da\naN958ljzytD430gdiger/ouvmLQGyoWyvVnmE9JjXqosdZbGLCc/XxQtj3UW\nUy97y9a4WrNIQ4I/+UHkvMNYi+pcmKDsp8vjVyLyJcBFBxb7QQ01xFA5o+OU\ncAUhSMUt71mhH+za5lqnGB4IRdRj6lhJf+s0iQGFddO0uutHqqGTW/lYoq/z\nxkCYSZ8S6cBh5nv3wiEpAlfWix9aFmWdB2C1ahKmTcARM5kJ3r9D1ZAy5BlI\nTPxc6abyPqpUT7L4BMtqAg5Ug3uIFu9zOaI1Woj3pLhttVZknvjMwKesIWmr\ndCUY1qWJuZpUP6g/KK9Dmf97az7A78rUbgRP9LXE+72fzpiSE1hXF8+wXAfC\n5Cdh9RCmQiCAmD8I2ZN2q5jlTGd6Unugv4KD3oLee1NlzptpLGuC+g3Cczkw\nIc9wQvQmfvs+GS5FSPhci/XuYQO4JAVn0kWyyW4CNJPCePpwtjXAWC3EKcpL\n9RBH\r\n=Wbtq\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"96f27d78a1ab868320bd6c673b20dd411cdeb2d5","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-96f27d78a1ab868320bd6c673b20dd411cdeb2d5_1541415822587_0.9887196331385664","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-af16849bfab55dcc39fbf3a21c20828b745bd9ec":{"name":"rendition","version":"4.30.0-arc-slider-af16849bfab55dcc39fbf3a21c20828b745bd9ec","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-af16849bfab55dcc39fbf3a21c20828b745bd9ec","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"8dcf9beb0bab0bf928afb97973070e872d29cb83","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-af16849bfab55dcc39fbf3a21c20828b745bd9ec.tgz","fileCount":271,"integrity":"sha512-MnJmuPSFyThYRJ/HD87+6R8OWGLzS0c4R8vRVPKXDB3Ebyrzc/mP+Ft6aLkFRuu/Tum2f5za1UTUXz0BCg4e2Q==","signatures":[{"sig":"MEUCIQCqYmtJDHTC/yuVQ8YYQzamBDE5nKFqoQdnnpljxNmktQIgCjMqKTe/yBSozbpuFhQdrCYJH/DvB3rMa0GBwSYIDDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3612830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4C8YCRA9TVsSAnZWagAA0hYP/RTOi856rL4bw73dWNxV\nTAUO4EaAFA9B+dXsSwFiDj9A4smMndghUKs04ttxpeNA/e8BupwvHd6wWl90\n4dYb/5xcX3AupLvH7NbW0b0s7TE5pK/N4J+1igPEbPTt02GCLjcrsnYwhwPL\nqS9mqvFS5yg/61+KnVRAdDYNaw6gxlxkpmkj/pgUJSXQMHgCg2Pa1fb3gmrv\niU/ZdRhT5UGSP/ZZIuAhR/i/ogKj6Fm1k9yRcuGWOV6yXWVFFsoTj3NLPYsE\nH4TzQHxt88OrMhSDtuJy4CtGdYENkotPyQyTIggzVi5c8Attbbfnj4I0GHHJ\ncFrPkY7qF1rSUCuhFgv5kFk8mZciA+D3wZkwGGUrkyFQzWvCm6LCrniP4ZXp\nyf5JEqpfxH6MnqVskKP0tJlq28gRp6pqVQ23abcW30umduSd0Cqo5fb9gTzX\ntIp3Vi+X6idld+RU9seVEuV2gIoeR+syaPp8SDoV6cI2IW/drkAoR3zKK0P8\nYK0hYyV7O2GGq8NdvtDY6b5ghZPrVj4D4UBYRDbn3ugk+CoNYNAFY4h0QGgT\nAH1BjLZ8K+bBj90m9kUzGlKrhaGwjWJySa3XnnSBrzcHna9UGOQ58eEXiRuL\nwFPJEoIVMp7gV6qBpanWC6Ex316ivrUD1GpdNQYNCxj5qwiKqhPQIzoPAkZB\nQq7J\r\n=/ru9\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"af16849bfab55dcc39fbf3a21c20828b745bd9ec","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-af16849bfab55dcc39fbf3a21c20828b745bd9ec_1541418776171_0.9491557444086727","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.8-update-match-media-mock-5fd94279253a5653739e8a661dd72b7baff2d7b8":{"name":"rendition","version":"4.29.8-update-match-media-mock-5fd94279253a5653739e8a661dd72b7baff2d7b8","license":"Apache-2.0","_id":"rendition@4.29.8-update-match-media-mock-5fd94279253a5653739e8a661dd72b7baff2d7b8","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"55f5a1893b305bdec1e325301d27af54bf3aed23","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.8-update-match-media-mock-5fd94279253a5653739e8a661dd72b7baff2d7b8.tgz","fileCount":264,"integrity":"sha512-yeb953NIHf7MeivqNuniWBRwFVzliKXBYxg5l+meNwmcnI9bRF8MTcYwhXkFLAXuBjJKKemy6GrxCWeMDF8voA==","signatures":[{"sig":"MEUCIHFTh1PPjV1flmC6rrvFGjrkxhcJRamqw51P6ac4IdvgAiEA7u6j/drkdFUVTvmw/0qeLZAxyCAMXfeFW5ZcZaoo4+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3517741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4YHQCRA9TVsSAnZWagAA9ZAP/2rB0n/TLJZb9blZ0C1h\nRvfzoxfKyfUDOmbxubi0QxwGNlOFGeUsX7kqg8A6T06relvjAixH4Hc1xfqy\ni4IdjN9UIFrbR5twGIHYtcFYulqDO+o/98S09ptL/+5MClUvfYc0XvgzE5RT\n7k3Clm5jIVs+YWDfmhcb22kPa3j081N1nbaU0mQDVW7b95JMpZNn7FfeLmpC\n4EwWa1UXAR/zAdsmej597YvkRDLNOQ3PijvG/HgvS4Ypul6rybMtsFXZjO7S\npwmGRApddsLO4sPpr98rKsdoKDsH+kQP0tnImYIlOkS2j/TegrG13YugX4jp\n2i8h+fqUPV3N88578rTUJcr/PnJPF1ZQU96Vrdig6icspjoajXrXwkbUSgWf\nImDCu9n1/wxI2oyk02CgkfSWx7nAGckRAoP3gQiqY4VSPiSGZnXpnvuqt3sl\nRNLqxOIiRKg8bcYDAdY1j89WPLiovT1paCQqvLysxHtVvJ28c9gOnCG7K566\nZg0rKrcSoUTVwgQx1UmvrR6zrhdszDZEVgAmrZn5Lx0wj7J+4ze2+ulfj4Oj\naxtBjJ9vPRJeOcfqZQF1v1wwiPN7LaU8+BV2VDC+g0oJbZ6QSMLcmT9GbT6U\nIpTO/gUucHqA2Ik2/p1K3AXViRnVMJ8SRQcM3SriImrXFEX76my9CqlXdWoR\n1yP0\r\n=7uSR\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"5fd94279253a5653739e8a661dd72b7baff2d7b8","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.1","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.8-update-match-media-mock-5fd94279253a5653739e8a661dd72b7baff2d7b8_1541505487847_0.9224014149924424","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.29.8-improve-screenshot-scripts-0813e43e50c566232791bddadfe6eced9d13b2e9":{"name":"rendition","version":"4.29.8-improve-screenshot-scripts-0813e43e50c566232791bddadfe6eced9d13b2e9","license":"Apache-2.0","_id":"rendition@4.29.8-improve-screenshot-scripts-0813e43e50c566232791bddadfe6eced9d13b2e9","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bed8f7d21e4e94f42bd02aae5c127230113361fb","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.29.8-improve-screenshot-scripts-0813e43e50c566232791bddadfe6eced9d13b2e9.tgz","fileCount":264,"integrity":"sha512-ZR6moUQlRwOadlAvrwm3hfwNt/1b3uUQykvF+mEF5KSFg5hbX/6vf+vt06VN7aePtwnoGRcfAJKtyBlW5uPJww==","signatures":[{"sig":"MEUCIQDtgD41AevwTY2nR8NG/0lYoqxhcRHi7nXirQpg35W6NAIgZluIwrCULwdtIafaj3TUdz39+AoiavwcRcXYCJbTxBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3517895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4YIHCRA9TVsSAnZWagAA53wP/0VbPJRy7qkPZyYD+AfG\ntZAhU+wRcY2QO8l51jnAlrTIJoMoJNaJbRFIDK7yrCzdrcTUGY7lvhAAiLFd\nXvtpzryjY3FFDa3C0SQ8Usdwi2dhOTUM6Zm8FqVwo0cy9BHByMwEMUYQ2Du5\nwfd6EmaEgjYu2uloofzURZChE9vkGljzRwEq//I9ANydBr3B7tUKdB+ymUfl\n9sXDPFk6LzIJK9IgvFHtCmOrq5iCzCteLpMSRtCsnAQ5vZT2hQo6n/uXKcmv\nBdeK50ZaJrw8p278LquQcljcphBHWJBJIUw/cFtvyJ1rjxq96PAz9NSFSm7j\nKevxdJAyARg0SaPizw/Qw8U8r98S+lc+4wFHgcT3Mt/PJoDacDJZkhQg//x2\nIZ8++wPrt/UCrbgQ5yF3iBgMWBl32phHdbwEfvnOGrjtCYhgob1lyLWwdbsc\nU9df9QSTycEdqLWz0b1rBV/Sk9RmjTQH8QJ0rqm6Ms3Kk+uJH7raC5IVfwHS\nrSLAUrfjd9eT4X1frx1VhugwLFOB/xkSB2GDbpVNmNftX2xrlMY366WlEn06\n3TAqLUsABJbOSeJIdK3Fqd5t8CWs2WBBA+gXGSbxJgn5mxmDNl+2WMS1aHNV\nX7y66eW76Uf9nGOYXNyY6/6il20sK+AV10M3mZFX0kZS0cCK7qMxVUhS4zlm\na81T\r\n=YZdW\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"0813e43e50c566232791bddadfe6eced9d13b2e9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.29.8-improve-screenshot-scripts-0813e43e50c566232791bddadfe6eced9d13b2e9_1541505543103_0.4841036148331819","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-d3f106cd84383f400818b9b9aa88d15b2545b4d9":{"name":"rendition","version":"4.30.0-arc-slider-d3f106cd84383f400818b9b9aa88d15b2545b4d9","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-d3f106cd84383f400818b9b9aa88d15b2545b4d9","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"923f0be2fee8896ec7df79071a90515e7a71e35b","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-d3f106cd84383f400818b9b9aa88d15b2545b4d9.tgz","fileCount":271,"integrity":"sha512-Ga+y2Kw3G1+842PtMiMdhibcDhrZrtAOAZSRVS48ot/bbIjKCvIfVzZMjtI3zTr4VIGud3a7vEyo/CoCx6CDuQ==","signatures":[{"sig":"MEUCIQDVHVrdpYPcblfZ1iTh3LXlYj6m+DXL7qHVr3eRZNFZ5QIgGRahGLm4qog602z0nNB2TDqiU2pGTFchUJUdDPbiwRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3612563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4YJXCRA9TVsSAnZWagAAlHgP/Az69Uz2yf3j0/cw8bRk\npzyp9GqHhu2iQpU7704olLaAdLk+83AzRViir8/eW2iFGAVet6OWE/+o+pkg\ngOjnETwDQBO2AW/8TAvh3sg7dCz+UfTm3g82GPMqBA47Js5jDG9Os5VOCWj3\nreqIj7u55QOV//q/B+wGOLPVzGozXlCeXiu3ukERDKgCppkJYNIAoew4Ku02\nU5Fy2HccyRJZ8FtzXSXgBxiv3YqCoNGU29yoPuTg96b5CzUJ2Rb7XMXKqwkb\n9LOsWIHqZoQWikfr6tp+XIBfDmD7qWX78E7OXUR9MZdbrF2FwewZUC0U3LL0\nn3b4GnNrp4xsSNAdjkM+r/W/OTSBrAczy2wd20IGjKGqClWin1nuAO1Ma+dx\nJb8xWRw7gHn9CmC2YYeSSQRrKKanmOEy6hBr/H7niqQvWugO6q2ZJ7gLUImX\nekRcuGEeG5NBz/qVLg2B3y8VX1RopVs4j/Mm6waTSMabJ1nEs1nGKmTF5T/O\ng1l0FFgtfA/BBuYTDONTRIbb9b++i3JLzkS4b9wG3GmjZmSfP1Ztlkr+ysJ7\nXtjt/FB+FzbA6ydFFuciWOD5Q5iE0dhnQPGOSz64OkCGO91hwUT4mMMFwR0t\n1jGcSPbgd1wZAJcLVgQ/09De0jThXRMZ7WSSZe3Og61K6wPkZ1cMGyefY3Vt\ntyWr\r\n=oDlD\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"d3f106cd84383f400818b9b9aa88d15b2545b4d9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-d3f106cd84383f400818b9b9aa88d15b2545b4d9_1541505622838_0.6963966906463255","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0-arc-slider-8aac34536d11014f0482c7cb7bfd9197623e37ba":{"name":"rendition","version":"4.30.0-arc-slider-8aac34536d11014f0482c7cb7bfd9197623e37ba","license":"Apache-2.0","_id":"rendition@4.30.0-arc-slider-8aac34536d11014f0482c7cb7bfd9197623e37ba","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"0a1b6251b75540f4788504b95acd0cb9428ab10e","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0-arc-slider-8aac34536d11014f0482c7cb7bfd9197623e37ba.tgz","fileCount":271,"integrity":"sha512-g2n3/wwj1uIXEMMkWzZuXyoAUwry0+Lc7vd0rUbc63p2wuKKEQz0kGdXVg3+DDHnw2qjvQbloZdQ89xH5mXVog==","signatures":[{"sig":"MEYCIQCtcIIeKlNJqZNHRUk/MBQu4J84/XOjpWcGKF7SRad6sAIhAN30PcC5aOalltLM257IGAYIAELJuvwZ8JjxUEofaMxd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3612563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4YxqCRA9TVsSAnZWagAA4RIQAJXeSxAU5R6rvb0Mf2d8\nOGXxY1HDw6FQUyoiDwHaWpfrWFrpFM6+A65Hj+qxPE+NTUF9uXfypCTvuvBf\nV29UDPhfPqF3HrRmfIgUPoW8OPu2RnkoBgs1o+F9ZOjpmXGz6Wcd9XpsFzHS\nH51vx8qgpp2aIPfnX2stmOPs7A23vzsMjOSAx4IXTWvOgY431eJeIGHVaO6A\nYWFglbsh4LnJCbVp/9VPzZ4Pjoez+zkFeWXI8xtkjd37wfGTm1PJA8EqPCzL\nttalhlzYkUbTVD2kYDwL1lKt8Yh/jRjR4lnhB2TpAfyK4OMDjafuitc5KKsZ\niyGhzWOU32O3ZIqV5TFsUtVi2xjcmD9AZnQGx808O0WrObMRYJK6eshtkrxB\ngqu6e2i5ZukZAGoWQVC85Bgv3umRFs5QjgUgzY7LYaIjOKwgjxGKO0kXtGmK\nCwxtAhX37a/KK/jORuwO38JoLtNfIGVDImEHNG7s5m3JZzH177omRPR5fNqB\n7k9DGYLp4g8iiFevRub6o2aisT3nevPICH7TdTZ8NCBsuqaJ4p5u3Qv17JIp\nWmLX9vhRVUM5ulO5nxI5+ieMad3S1M+m6lGwVwutKlRHUUvplNnWPQFo/fsA\nCYol83j5rndwbZ8DaLUtUCkLKQFHWXsLI65YhZwnkKiQEEwMYM9ZEOf58BXx\n3SOM\r\n=oZtC\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"8aac34536d11014f0482c7cb7bfd9197623e37ba","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0-arc-slider-8aac34536d11014f0482c7cb7bfd9197623e37ba_1541508202076_0.5230313064226486","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.0":{"name":"rendition","version":"4.30.0","license":"Apache-2.0","_id":"rendition@4.30.0","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bccf9cdbad3a0368f479f079addde745417c59de","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.0.tgz","fileCount":271,"integrity":"sha512-DDOLGt3gzRlY/OZcbBaghDIp3pn4ZNUQX1IvvYWkNIlZvYNbfARQm6C44aZIhBu+fb5mRdq6pn3Z7wgFw7O6Lw==","signatures":[{"sig":"MEUCIQDJaXhxlh4t/ygsYieMp3j8BiS2uXUXker22tOrZNUmaQIgdDmr/0DFDB+RF49n2Z2/MxplFPyUJbAyBuprh8grs/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3612511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4Y42CRA9TVsSAnZWagAASEAP/1TD229Y+jXsktRWdC4K\nH4wvtksXxt1PAmrjRjWY5W4MZJWdSHQoPSTW1BnA3uNkiK6W52HFgD/94Kpy\nyJit+2UvoyTA5KATe6GdfAUyXqNrQljk09CAjbmr0IC2ne/J9KV/6SqE9264\nlWxCLOwDbL4yjNrwNd26KEYlKMcCTzScXFikmDEk8yPWrKyhqGzked9IfPvX\nfxUj0I+AHdB9q/sPth0tFnuf0fSBFQYHYLr4n1wSLwL2pWiSk4iZve+Stg5F\n+xsO3w9PhZhOc9YIZ8rFV1yAJfMJwL1Dnek5I1t3l7TJNfuHMwuji50yCi3S\nwj7tQIqwA0FvPt0QZPkhrIZjv9PELJQKJxTBx+W7WUuPkizUASXjWQWgukzD\np7fQLoV3kP1SpPWSvChkdyOVoIcTYtqmAdW9lxQ25az/IC3GFKvNZ9r2bVZS\nt7RZbNvxSNiGjU4rUHJRzlog6uzui/Amir+iI4xdu3SA6cWaxuj5prZBCO7p\naBKf4hTLMvewbfq1/6+ousGTThMJnPK5QkbVQ++qVwpGDaEFMwygAxZN8bYQ\neABCuclq4/TvPWzpPoeOI5GqLo5tNzdstRe23VdojEWd/BozY+3wanmmh9Cq\nCfO/qe1Vhv9hpDv7yHUd3gF3co6ZeHImzmbAq4Y9ksQ5Jo4wjxOzVwFBqVsa\naWj1\r\n=pYEg\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"2103c760f2ec9b17646f30057a34b89c74477e34","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.0_1541508661162_0.17329464135526873","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.1-improve-screenshot-scripts-df291548688f5559189d73aad2fd91614fa139fc":{"name":"rendition","version":"4.30.1-improve-screenshot-scripts-df291548688f5559189d73aad2fd91614fa139fc","license":"Apache-2.0","_id":"rendition@4.30.1-improve-screenshot-scripts-df291548688f5559189d73aad2fd91614fa139fc","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"913ec178d787b2812a81061d277bdedd60558043","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.1-improve-screenshot-scripts-df291548688f5559189d73aad2fd91614fa139fc.tgz","fileCount":271,"integrity":"sha512-55THIhQphZJYvKBmTni9xrs4abXvTpLv7uwKg5smO5BSfHIpm922hFDyv3xlY/qR5GNMmupmLmSMElHUlmQoAQ==","signatures":[{"sig":"MEUCIBEYv9kTy3/6a9HlbpDO2Od/fj+v3UBonqkEMPfpB5bXAiEAw1ruzO/xi5MKHE2a5MrvxgL7Btjl2Hctx3FyCFBNAU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3612833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4ZbOCRA9TVsSAnZWagAAzgMP/ibpfZx4EmvSV/Bvo23G\njdR5LAyKp9XcnEXR9YUmNHOe8swwRhuEIYSDnH2EIKQe+fGq2JjaOEwREu1U\nl79ul65ZxocZI5Bbj/VzQx9gb3uf19DE9C8l9+YhQctH2WiijkeAmr0VA6tn\nOE7WMNFD3F8mDldkFMs1ru0Uwsf80pMjV5YoHuLrWEul2ZCV3Pesk4eocAgM\nrGzqWnbdeoHmdH9slltWckA4hRwSAT2d4Bqd8QNp1+gbgnzq6HSuGPkBa6IW\nO+SCEvPQwMQ/mZ0rOCx3oMUnnBGfhlwUfedCarobmtZ0yPSM/ML5/cBj3s4X\nHQdkkbIhbuM7MFSJd5PTzAuTU36svtDd3MGWnCu/H3/7COrMl2YDJBuf725p\n525uXZcQFHusD9JR5cY5LzBpWKLIuBm7DzLQyDiWXJLnmtUopvKhzFmC4NuA\nUnZkdDIwUJ9Ex52D91cWBQKkl3G/9EHQV6v4SEI01ZdZ9p8UZlOa1/iYSnLO\ninZtyW3o/FSJyaS0Ktd7miLBjJczxa0G72o3YJgs8oJjX++TrEz6AnBps4wZ\nvFl9/knTa0NoHmUFCB6Vj9MB3lfZbYLpYzMXxbdksqZ2Yah5q/tBofq+UUev\nLVrsPSZCd5BovVvOFshJHbGfK/LBGrQTjIPBjLYWeWTF3hvxUb78w9zkc+pf\nLsou\r\n=zHq/\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"df291548688f5559189d73aad2fd91614fa139fc","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.1-improve-screenshot-scripts-df291548688f5559189d73aad2fd91614fa139fc_1541510861559_0.5060149942358803","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.1-637-tooltip-layout-8e10258b1ead2c4711f5d95f2f04580599f14437":{"name":"rendition","version":"4.30.1-637-tooltip-layout-8e10258b1ead2c4711f5d95f2f04580599f14437","license":"Apache-2.0","_id":"rendition@4.30.1-637-tooltip-layout-8e10258b1ead2c4711f5d95f2f04580599f14437","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bea283bc9557777e8a61323e07d5fdf4b7694d49","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.1-637-tooltip-layout-8e10258b1ead2c4711f5d95f2f04580599f14437.tgz","fileCount":271,"integrity":"sha512-vU/IEOzXi8XDYQCcq31p/G8Dc3Zny2OPqUxcd3K+x/6qEdtouDQTep4MpqKZN9wHFE0nypZqmIsUIIBqhRBg2Q==","signatures":[{"sig":"MEUCIQDoBh8RwoGGjmsYHkubI9ER5lvoZarr8UCuVKkPasH7egIgRpgLrSXy6tpVhz9t/9YWvDhv4SUM929JFcVJS9JoEzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3613665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4ZhpCRA9TVsSAnZWagAAPbsP/0NGJ8dGjrmBolPWJq9Y\nv/15+dPi34D1dBeFRDSZcB2dntSrEkzTyo4Pi9yy9rtSJ2S1g1IaVdaAOXMz\nUBqCV3qP1uWMZSA8shGtiZ+xQAAmsy2jsSaqsZbbtNCS2AVCMGpWt84HfGM8\nbNyxE1F1QAP/ocg0NpwVvT/PQp5B/AlKbnkRE0yFbsETkdJaHvzVbygEgQtC\n/YmxvjusUu2qkrVUpxfV/ndmz+/A4q0bszJdteTa/huYh7IC+sPvxsi04Y6j\nxvghH+qS5aDRFxz7GSdGK1fdHaenJrtYDMziJmea61wSkN3MhMvEjcAyOJ68\nPweA9x/VA9Fv1h9NnVFn9MpAVK9Lx7vA6Ir5BedV414suZilW/qLNgaX8qBY\nY62TTndfDQLyr+GuWmiQKsOoUDdCb1Hdk42n3e++AoobP/Q5dnIt3cA08xBG\ng6DRivLZhT2sMVLbdK49BXsZMuJJiBsCPJmjtNTCBoWu45NirafdG9eQBit8\nThgoMf/j196EbaqLhnTVWIddW1UEiYq5Xi8ntJPerVWMWrMNaNxUnFm45V5Q\nMPq8zLKCYQYrmBREg5lx1t6khkS6XqsmdZbmQ14FdVLuulnTlvKB1cFBWKEf\nznkHozZ03Mk/n/s2Bu625GUbT7Z8rFuT83ghv4qzFlSkLN6GQpv3+d2TAPnD\n9137\r\n=KfVH\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"8e10258b1ead2c4711f5d95f2f04580599f14437","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.1-637-tooltip-layout-8e10258b1ead2c4711f5d95f2f04580599f14437_1541511272262_0.26387955576523603","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.1":{"name":"rendition","version":"4.30.1","license":"Apache-2.0","_id":"rendition@4.30.1","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d0acbddb93d4c3aaa6b478daee2424ba6ed8cf09","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.1.tgz","fileCount":271,"integrity":"sha512-3mUrjG+uzLSCSE0/Qsdj5LtrK89MhNOK1uazZC0F33ZnwuzC/JLc9JOKNR1DbQxRC3joAJ0rvptlorkf11Z/7A==","signatures":[{"sig":"MEUCIF8L2IaX/OSNGeQV2BNlOfgevPP/ZFzlwy+DUv7uzELNAiEAzy5hGFIfaeh4vuvtEQW3flafr6StWESwndtglEqrzh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3613605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4ZqmCRA9TVsSAnZWagAADK4P/0YsfrycMMMomrGntnDj\nQ5eVeWRTrb/eP/ZzMQZtWoyiME3WHya1onPTzTFSQXVMriSMMPANmgO7c9bY\npftomJVdB08wMZlIMkySklv6cyxMpYr2S7BCiSWnmQpGHfvE7GPb4y5DJ3e6\nasggkVmSNRf0U57iALxKBAUeGhwhAlx+l39H/6vYdr4XTkcMjxZjyFp3ua3c\np1EiEUH84JXC06NJJWz6/g3uQVphzkDtIimxLZE3ST93uN9TjeJ1J3jOU1OM\ncZm0qKFJ6WPBFa4VBIWK6DDP8mR8VYXgc577dI/7u2Gh2aXDuR12iu3/lHJX\nybXinFtfkxSt+EuvgNw8Y8UK1hHOdjs6gyVRHCSwLXopGvHtJPvTL49pDIH2\nWTWOzXVuPLHwAGnIGc7H25GOg+axPdkcKFAatMiMwOG0dkID9LXp/kvwENoT\ngdsUvCq/+wCe1ytrCRzNyjBFlkujNX8rfuLsmCbSbnk/TH/zQBmMoXwLo7YA\nvuhxyo2vdoX76hCizb0/Ds81BAfcckNoNcVQGm7vFdAnO+VOqZhfLnHql1Np\nHwO5U/5pvucQv/98pfnLzlpvp0nE4svAQrh77MPs7y75l8JQXq0oNcsI1NPn\nKFRhSUX3jJGQIb3XihnwUphTpdhH6u1dXuN3SxxFr9/jy3i1VFhhayduLzN/\nTsAL\r\n=W9HK\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"1e85201f754944a7d29c572fdadea275c9fa57b0","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.1_1541511845058_0.8677370898590877","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.2-improve-screenshot-scripts-0f4cd942ddc016a82d67162d065b7d558bd23fec":{"name":"rendition","version":"4.30.2-improve-screenshot-scripts-0f4cd942ddc016a82d67162d065b7d558bd23fec","license":"Apache-2.0","_id":"rendition@4.30.2-improve-screenshot-scripts-0f4cd942ddc016a82d67162d065b7d558bd23fec","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"44cacab42cefdb6ebec69e40a5936dba72a97b8a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.2-improve-screenshot-scripts-0f4cd942ddc016a82d67162d065b7d558bd23fec.tgz","fileCount":271,"integrity":"sha512-m+88EqK9sCaubFKgDugzmFaoyjmZUbRusc8tHsBEMJfGz9I7aTjAWT9rCrU5XmH4e757hOxjDHUvj7Pm+Hkzcw==","signatures":[{"sig":"MEYCIQDIj25pzV9xzSdLrx67s0NTyFEIDvlTZQCl2w9A25EjGAIhAMY94Qo9YJaoIXZqSv3+wToYPK0urV2287SSVJQCQWyo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3613927,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4Z1sCRA9TVsSAnZWagAAHOgQAJ0i1ss/6IJoVyTJQ/kD\nIoYJGHy2BOrivSIRbgDslecF7E6qgMzDxntIVlnzjGTHHaDZZgwBlxWBSndt\n8Y0ukEOsciM+diHydqpr2DKrRdZGRoGu92Vl91Tzs/wKSDLPHrWx6l/1S9Ov\n1mau1a90DRMlDW2lsAA95DFakqpY0r2O4lkKgHGmwAG4v9KzwcLUDPl6vFXr\nI9kRcu5LQ4RjDca+6kTsF2b79xdITJfmloJ0FTD4TiwJ3sLSUyH9bO+zk+pL\nAeBVo5RzebbE6R5/RvVp1cfDAmmSQB3Z3Zel8PYjT12PvS8LhFHQUW46oIvq\nRyLEoHbeY0/QlolybbSCGI13LIljSEsnKOyCjuKSW+v6BRf0YLEovDdLzC9L\n66A1tlpUUam+yMW6SqXZ90+O4nTnp+C0cut/LrJX76Hrg6OfPDfHJfPDij0u\nEL/ikjrXt3SyRGWM4FWqVEBbq4pKoMIgNK//Gi4b9sz00CLYqdtK1NLQpdzn\ne1sPuI3OuztYKYZwLnKbuuF2GYAkoVZQJXH/zl/fEHYfbssUl9v5GveRlOen\nm1tCMC5wqbv2zuz327EQZb7fO7bg6gmsa9xnN5iUQ+WMmA/MfPvjTw/l9/IC\nnKnAoOrSYQiqJGP//r+mJ48Chm+vD7FRXzWyLCoUQ6JSJFoP9WrDY9rbmeDU\nA03r\r\n=Vkgc\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"0f4cd942ddc016a82d67162d065b7d558bd23fec","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.2-improve-screenshot-scripts-0f4cd942ddc016a82d67162d065b7d558bd23fec_1541512556159_0.8944957186913289","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.2":{"name":"rendition","version":"4.30.2","license":"Apache-2.0","_id":"rendition@4.30.2","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"06d89ccda6974e5fff4a74faf62b9767d8e7c1c7","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.2.tgz","fileCount":271,"integrity":"sha512-M5dHwuyBb6NUi2Ivnlrl8DgGcCliGVJZZ1s9SDS+Gx/rZJqEuIxi0pW5bo/o+bkB+ZBQQa+jj/WyZb8lI5v09w==","signatures":[{"sig":"MEUCIEglUAp4WtEAswAWqO4f6747THW21qebRTxBIJRGzv13AiEA6BOyaL5ad3mc22dIuQIy9vMMzU0MQy4P2kt5BQhqmdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3613859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4aA1CRA9TVsSAnZWagAARgwP/RrVhZQ++R9zwiPpDQnm\nEcn0KdOMTy17CnDy4CyTR+muk+sf4zLeXajOTig1tYfmrOhqFi/2hZ1AbmAm\nRT7H53v12sPNNEyKu9MaioA/pbhAUESKcXx0ePWC6ZlADbUPKJ5XIySBqfnp\nULFTSXnfVsIJtDPKshdgM2toTDcsgrD8R0kDyF1VjIvQmcsQNE/ZjCMaDOgO\nacpPKf1gaPRG1lFd0vx7/BoyXSSxtmcAT38xRk2USXOK0jyWW/W4vtSYmf6r\nG1MYkCbW5VnMTPSwONWQXmAjBguLkOgtW0ePKGK8o+WO7LzwmVWWbMuvEN00\nK6J+xlr7d5TDBjhRJALl8nZmOEtVwcoiFtSYhhZyChPL96DIZHSbhCrIHlln\nGWgFMI42MSnoAhkBnZYwObPZF4knTmSRwfXxJJtDwI/UdLS2fLEFKODvJRp9\n8w6YDXn4UvJ0ufbI+1ToUamtBqD8M37/O1c0cOM6Ogb8xtHLmOX3SH0hA6rE\n0It8G6Mrwcs1Dcuuzr9xWHP4+Bm2K6LyR5GYFNh5ouYuyf4eFVs/ImicFXSe\nCXNdGSbqcMxAIbbaFg84pNFIsnPVvIwI07Cqgikka4smAN+nERs2rDjUOZhR\neNu7i1BqQXSS+q3aV3aQnZE7ibgVUiJ8quEcUED2JD5Lfb2KTt4c2A/8Tvvf\nWHGH\r\n=Ya01\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"18731256ea1a4ae5243f0754dc7c8369fc4eafba","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.2_1541513268461_0.4749293285455707","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.3-644-gfm-line-breaks-79c8e7877c1854f49a63748785a8067d9cfef7f7":{"name":"rendition","version":"4.30.3-644-gfm-line-breaks-79c8e7877c1854f49a63748785a8067d9cfef7f7","license":"Apache-2.0","_id":"rendition@4.30.3-644-gfm-line-breaks-79c8e7877c1854f49a63748785a8067d9cfef7f7","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cc806d54b60e1ee5d5e3be3d340b380cd3617ddd","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.3-644-gfm-line-breaks-79c8e7877c1854f49a63748785a8067d9cfef7f7.tgz","fileCount":271,"integrity":"sha512-j9jIODCv70K3dixRQmCWcu1SenDsuzB7yTJAxg1a6Z4plbQbAVBGuTvcQ9KUHAiTctHy7ZDeJxqtPhLsaAzoJg==","signatures":[{"sig":"MEUCIDkVS4YaB63/VOz43Oyj72pCqKbiGpvrrKWptUV1W587AiEAguB/sh9s1CmTVP0TrtTHeUwMjyWL0sk1hKgDSXU8uYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3614036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4c6ZCRA9TVsSAnZWagAAuIUP/RS7sssTZD7FQ1sb5+7J\n55BJ7knPsa0ykVhH4Xs/GYe9fzVSZioe8nt3A68yTCy6A44XpPYQZ4CptG3+\nWkpOkAHDjvDPEg9MY77MLxDpc0SrFKFPmP7wnQbdRgEQbaWKG4HEInZfgpzm\nT9R2XELizd6NTw0lIjoYEutpEsSa+lq72M3+rbEkqkO1dhWBGmI0RwnhUVAl\nAQ1kyueHawoVuuGCM3zL4yRVuQLHrToxmi7Qih7cz+2IFzvUTqwnDeJXTjmP\noH1F5ryBVZUn+i3oW0ix5QKGZqdyCNEIuIoCDONHVhPS0X8xb4IRoPjasbnT\n/K9hraDE0xLALa2rCWNPk+Sk8Tfc5tHh0RdD707l4wptrbSgLGPetNZUNb/G\nlms5Cqr8gV1WdH9C3RM2f7VkIFTBq/ObZIYmQJ1j7iaX6fPhX5+ywL5/fO7Y\n7H9zizg0vwotFRpUuwjGoPgVKGl8khO3QdNcnxc0LzTFsLOqQk/vDWaDMSYW\nlVx0XbMOqteYnB5GcQb+xuORlqpSQrqbUIafNEPyxz9NM+eE+qi3X5S+sy7V\nhqnmMeOexdiz8ci4sWFI+JAXRo12i1cYPumrl2fZFHabk9KgR/IuDv8QOFIw\nKFBoTqkUpzP+f4CuVgCGvagbRpOMZ7TW6RPhEeRfr9fsTVzNzRAcQqFxprls\nJ6hR\r\n=cGmz\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"79c8e7877c1854f49a63748785a8067d9cfef7f7","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.3-644-gfm-line-breaks-79c8e7877c1854f49a63748785a8067d9cfef7f7_1541525144317_0.7447204179833871","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.30.3-644-gfm-line-breaks-43bbdd9d9bdbb844b399d51ed0a21761f6b18844":{"name":"rendition","version":"4.30.3-644-gfm-line-breaks-43bbdd9d9bdbb844b399d51ed0a21761f6b18844","license":"Apache-2.0","_id":"rendition@4.30.3-644-gfm-line-breaks-43bbdd9d9bdbb844b399d51ed0a21761f6b18844","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"4fa1f4baaa809cecb8eef06f4751c576af95169b","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.30.3-644-gfm-line-breaks-43bbdd9d9bdbb844b399d51ed0a21761f6b18844.tgz","fileCount":271,"integrity":"sha512-kxAuPjUg8TS1nmas80vwhYLdDZxlrEgzn8bsVjWMwQRCS+kkY9URyZe8zc3AmHa2VKpSXCT0U2ZlU07+3oOCbQ==","signatures":[{"sig":"MEQCIACb5Gco6kBFEuIgb/5g5UfSE854SDm3D0p/y0NxUgMaAiBtR3ckFdaFrwBDZju3zab5mpbb30Tkr8C5YKsge9+5Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3621587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4dQyCRA9TVsSAnZWagAAerMP/iD1iGHRsdT6MeujxxU5\n+fIjXRztu6+/4fDvUpbxY2iQTCpGLzFnG4DkY8/U5OEror9DgRV/UOHHj4DM\nvdH4w2+nYdD/Ji7XORiE0VcTQurzTgklZlV5lWnk20k0HtDNxPwYmb6vx9dP\nmeXsN8BfnxBe+bjobhN7aCbGHf5AD/uJMG6RgE44uuPhe3vIO5cy8n5IeFl3\n1P3u1e8rT0YJKiFsyg30B6fiemRkCjceFU9/McmXG83jW8GctEVKY+UJAHmw\nabMbU9Fm9IbjdTVZYwVZRqtfr1MTVs3rkBxTKX+AHjk+u9ZjnaYSBDzw/21m\nT4NMKOIImNd1BJMgoqayye/F3grMGToIeJY8KUqihVPKXzJR07duj9kGFLIn\ncnQbxB1oqPHcH8E+0i7093zypbuniXIp3wOEzgp9lnPZznp9vKO028LiZdTt\nr6senuUIV+a9pEgPHbvy/cjr1VPHil+WJQj2ZT09MNcUdPDj+0FG1fdafxQY\n5LanfIIRSVHlNt1wBRxzlwiIhECXgTEOrPzfSTakAwYRwF5zqKtgAynHRXwj\naroKBmpBduV8lVahDoZ5FquK9L0/tAMvThMaTJF1dmj6rSAzv6DDOBb42R+o\n1StdpGdLBRjpCLO+QH4RFdFRGZvMEBbiPF1MQs7SsqdGgnWUK43p1iEAs/hp\n+p/h\r\n=4ylU\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHeref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"43bbdd9d9bdbb844b399d51ed0a21761f6b18844","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.30.3-644-gfm-line-breaks-43bbdd9d9bdbb844b399d51ed0a21761f6b18844_1541526577390_0.6810215326855267","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.0-646-button-group-89475ee0311a195678c686be2fb9188ba3027fec":{"name":"rendition","version":"4.31.0-646-button-group-89475ee0311a195678c686be2fb9188ba3027fec","license":"Apache-2.0","_id":"rendition@4.31.0-646-button-group-89475ee0311a195678c686be2fb9188ba3027fec","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bd1eb2c57cef9cecc00408530703ec9032dd5023","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.0-646-button-group-89475ee0311a195678c686be2fb9188ba3027fec.tgz","fileCount":274,"integrity":"sha512-jUokh0KSP7XyMZ0OUPq1WZjptT9VOO42M9OnEbSj8MeXRPAY6SpJsBrUfCKEoZZzs0J72MNT17SsDkumDltT4g==","signatures":[{"sig":"MEUCIDwOOR4DmYKXZpKm3HpCfTCjsGuL955hZ/VLnIUj2/RQAiEAxfhqomOvALREpPiHaR9gMDB1wa+Aq2OjmccGEXPu5SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3633699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb41rGCRA9TVsSAnZWagAAMUkP/0sezJkrKPEavocwhGpP\nnfdgPpvg1zEtkSUejlSoUA7YDXOPnX38nBSHwOeeGrgirDTaGpcX2WZFqjYK\ngrbcnNC6uXHxuQnt3c3aShwh80xYjytWiwV1MeNMYNq9tmw5R06YZvRJYJzL\n/r0OMBDBgZT2G1u0+HJ9i9r7pqY0ryl1Ru3QcwZ/NuHnKOWtTotjctLopfe1\nQXl/H2Qeqw5UUPoL0cKOEzAzbG8wUPIafhjAnn9F/k6v5r+ARdUN4Z/wq2Q8\noqGZIRn9ccXICMXRn6beNwajm7sH+Cbg/bE6AMekubyBmOyqosQJFu4VO2os\nqPWSUFqkCx2cee/f+2QnRY+zvnLdhLoYBo5AU9qx9ZZBzoW0HyLQrjO0Acjr\nf/2iFaK0CqTFLJezB4SZ47iKsP555AWD5kRr6gTuzvsRbYXbh21UPHDrQuSE\nPZb2s/XRB0bUvoDdFCzfvtmQ6ctAQEb7Z19qS9kMY/JkXnrjsQWzsG8p0rLe\n7nSMjvC2hY4sa7Bxb/vQy0OOh6CAqOz+T/tw3di35zVi+GlJYc9nOAwUgyJL\nGhr2INk0q9mYCnlBAasAwBC4nB7HOH+SPsGxPSBkqkN3PxCFFyfSFUtvdf4f\neJB1FmFtLKxS850gC51mejMqPfjBuTN0T5IzofNjtq9TTnf6kjS9O0V+wqao\nuPR9\r\n=BXOY\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"89475ee0311a195678c686be2fb9188ba3027fec","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.0-646-button-group-89475ee0311a195678c686be2fb9188ba3027fec_1541626565755_0.16947047545131544","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.0-646-button-group-dc81547329070cd642708e6e859d9933d3070ece":{"name":"rendition","version":"4.31.0-646-button-group-dc81547329070cd642708e6e859d9933d3070ece","license":"Apache-2.0","_id":"rendition@4.31.0-646-button-group-dc81547329070cd642708e6e859d9933d3070ece","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"704618ce506de76899d75ce331a26f9ba202c88e","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.0-646-button-group-dc81547329070cd642708e6e859d9933d3070ece.tgz","fileCount":274,"integrity":"sha512-xtlbeMHom0ku5NEKEE0fn8lR9fb7gDxuNr4Kx7o9q2gAagceB8eSQgxSmAFF7Mj6XDQt2WtLQ3UxiYOLsWItkA==","signatures":[{"sig":"MEQCICZ+u5LTwW2oGmh3OnkQyaR8AQNKzUVZHH8zbWhqzUMaAiBFWBDUj8NVs2djA6RdXTyV10cBarw99gPYfA6rkciLFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3620232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb41/kCRA9TVsSAnZWagAA9hAP/i9foCBsQb9e8Hp5Ocn1\n8VZRu/ngS/izCl3Zds6Nv4GY3y+fMoxPM5TNHJou88dT6U6egO6OG/MlE/Qw\nxfBTgYFtK1f2tj1wc9qS017lEWo0MgxgO7+WTwVPOG2ZwD9zujxc1sJHh3le\nGoMdqXRGb5Vq1/BOCkPVinCD41bDYbUhRhsPnX3AWROvJUEkSBM807G9usgr\nF+KH5PwMlF6EZLSq7Dtj9wTGFxWAYhQ1dGaf6edZQ5qB8me+7VI825CCiZ3W\nB/MWwvy8wM1vQSlS3Xt0Z8KpOJRca3PUKfjKVGbPPozowXqCUJ/LFFmqzqE+\nEXg4Tn+6y6fbj7bAkDZxO57RGjjuyVvyZxW9jGgQ8tB9WPak0ml/qxUop61Y\nxbYcvZ1RBX4yZZYk8HvwYZbDeYTPeQKkiuWsULT6xXlyl9SZ/25hc41MZGXn\nC05zIvnkjUi4ZfirTB4EBYuX9Gaa4jhUhKL2JTMTrzYWDY5jk0VsD5aFvLTI\ndKJBFIiZB6lR6lN6R7uh/e09/R5LaTPaP/RFMl9pU9fLPPLrCEYoQjovQuun\nTHA+8mJ/RW+ky42jfagnPb7jrSigdZtz2MvDwkRKBBQg1G/KH0IJvx/CEznW\nznHrzdGLyuIEv2ooMTOvSyK/9iHv3/w/q3yd/3ODgSjPP5PeP2cmLKO68N+2\n//Ky\r\n=LWel\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"dc81547329070cd642708e6e859d9933d3070ece","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.0-646-button-group-dc81547329070cd642708e6e859d9933d3070ece_1541627875561_0.11706324274169666","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.0-646-button-group-0fc05b802e57f73dc864e03c1338a65c20e5abd9":{"name":"rendition","version":"4.31.0-646-button-group-0fc05b802e57f73dc864e03c1338a65c20e5abd9","license":"Apache-2.0","_id":"rendition@4.31.0-646-button-group-0fc05b802e57f73dc864e03c1338a65c20e5abd9","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b527a4684a5180116567116a75fef108b7654fd3","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.0-646-button-group-0fc05b802e57f73dc864e03c1338a65c20e5abd9.tgz","fileCount":274,"integrity":"sha512-to2twrg1y7lgK99WsLZ/pH/iLz3CjQXq/gakx1Ar2IMmtdQJ/4/EHUpc1yYJT1pnaO7pe4brkbqZarcf7XOJCg==","signatures":[{"sig":"MEUCIDSJsKCYJR3gQCj+mzc40ybAHNaXmNG4y6Pw0e1CSFJ4AiEAyVXZET6QVOdkgUPufrEoq7HZs8HH4Y+vaC0xXk8RVAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3620232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb42LhCRA9TVsSAnZWagAA7XQP/j7EyWOwPEP7BKoHSgnX\nTyMsnx8CSb9MM/Cbs93IO2IemRxVyb9Q5/Y0E7jy6K2ipKYqFxTYEe1Z7eH9\nXmkh43+LUijK+57pssuq23mMCwAARfhTtafCqWQUQOjNeMFfSl5BH/lbh24g\nhU1yBwMtiK2WoY4aPGwwL8bLzbF75ns9Ly/X4ZObTz1iqivMS9OWJxOizrzE\nppu6qh1FzWtST3Nu1MzWVLt2yQlzi1ovxqikdHB1va8rbKHYptZes2PuvVYg\nYXSaCtLjCwjFBhpKolRnUQyomv47IlyflFpUXjoJ28IoECD+Nd03P7MyluAP\n490pZvoFJ23F+f6b96O+LITa9dY9HLYHcc2j9MyQfzUexxs0cdNGwMzpxTxJ\ntgyFVKumc/6+b+pY6X6qkFAY3li5rBdeoQUBzNT9l6ymNOv8SHn38o1Nipua\n/jPPuy9vwVazr/PivlQKJAOQdC+V1OESGoEuAGeD9hIjOmKkDYIg8TXY7CM3\niz2RFb7zmw2QeWZQZplW+5B6/s5hjDKsHoeAYJ+gQJSbCOlUAmW4Y+v2F8fp\ncHymkpynn/nUbSO4pYJtgt8Br1x+gr3ZOqCSkkEZVfvD8207hU4CDDQzJWvs\no7ujU7EzAuMj6JhTYqbZKXcXQZzf+vbxNc1dyKMVk2xZSp5ZFkw42TNCYxbj\nNszm\r\n=ntut\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"0fc05b802e57f73dc864e03c1338a65c20e5abd9","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.0-646-button-group-0fc05b802e57f73dc864e03c1338a65c20e5abd9_1541628640364_0.419547401598541","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.0-646-button-group-d2659443943d50040d3431332c46074c0bcca6a3":{"name":"rendition","version":"4.31.0-646-button-group-d2659443943d50040d3431332c46074c0bcca6a3","license":"Apache-2.0","_id":"rendition@4.31.0-646-button-group-d2659443943d50040d3431332c46074c0bcca6a3","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"f8601f192b6544cf69b5c4112af1741f568720ba","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.0-646-button-group-d2659443943d50040d3431332c46074c0bcca6a3.tgz","fileCount":274,"integrity":"sha512-1kcjJ6XuKTNSK8G58mFxkuME+8671+g++ZBUgpYqnYcPcxQ9pXW3dI391jccn9/s6TvLeMuppnO2ewWoarh0tQ==","signatures":[{"sig":"MEUCIB7ldnlbhjsNgU746z5gHwVzGR9n8RSzyDWuvCD+FUcPAiEA4CyCAf0tIUD4XT6NsY6AjkwODYKh8qh3P0VbXBPbHSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3620232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5DoqCRA9TVsSAnZWagAA33sP/2bCv6ejUEp8zw1ioDdK\nVWPOl0i+8Jptrf/Zj002OKZyzdhxCzDp3N0b5er7821jpwuS4M6BWjLiWuCx\ntr8xikZ68YCM4c3RB9H0rsnTQALrvMkNB+4hPVGPEfPDTMKNynLime63RGk4\n/ElWlzXLxiML+0K6Z4W0HOPUjZVUbI3iEFVxKwTAxveQpF2lhh/NQoljHS/l\nz8vsM5t4eIMSzl+Ahqo4tlqv76CyqiSUa8b+/ttuCEP8atUHUJZB5T+x8mFl\nT55woDzSDcmU1wamfZrm8GlFULr9ozlQXiPxafWtr9pV7mY/4Zw/6kYwujhe\nmrfAOU7bpmnhN+cFqPIfqKey9vGVtQU7hrArPpEZusjNK94TFT0M9HZ26izV\n2ymgtSh6p/dUC/7v4bgz7O4FgZmqC/X3Htp/I26px6RhpASNggZ1UgEptpTs\nxFv/sgu3lBL+bJVHUB0HULMH0leecrhxWMKdhWYWBbXJQd+94wD50Wcj97B5\nnRpvbV3Pe9mDiMBjKPIf3Bm6TU3veulI07GmynFKrg3M0e4Cn3lRpvWQPIky\nDNhHxb+C/SxRfVSk+h7XLpcE1Eglvmmyk9seJbRBG5ZHj4951pNvHJMuAlGM\nfLSo6Dvh6cIXjT0oXnokqTu7WH0lZkGm4BTEbQ1qpN2CrAlxaAWRiR23rRLp\nWM3g\r\n=tFK/\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"d2659443943d50040d3431332c46074c0bcca6a3","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.0-646-button-group-d2659443943d50040d3431332c46074c0bcca6a3_1541683753940_0.24953075954117865","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.0-646-button-group-528b4b3a2cf6eeb24d3486eb88f0b46a34eb8475":{"name":"rendition","version":"4.31.0-646-button-group-528b4b3a2cf6eeb24d3486eb88f0b46a34eb8475","license":"Apache-2.0","_id":"rendition@4.31.0-646-button-group-528b4b3a2cf6eeb24d3486eb88f0b46a34eb8475","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"cc666f225e4efbf3274cd4245329e4919ec769b2","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.0-646-button-group-528b4b3a2cf6eeb24d3486eb88f0b46a34eb8475.tgz","fileCount":274,"integrity":"sha512-MWiwZvrmMsKZuTyisie+Gt1+dmnGTA7emnQBRmrpRahYTXCT1azi1a/qz7D0U3zMsbRVEVwqaVqUM1+f5xzCyA==","signatures":[{"sig":"MEQCIE7v+O0iMe35pVTpFqR5/Jwq77Lewd7VvlqsJTRqYk7dAiBFghxZh5ngHuEax1vh6bo7iB7MuSc4K/e6H2dn4awj+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3619860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5E6iCRA9TVsSAnZWagAA7isP/0vyUcCkOsza8vNUJ6Qp\nISL7EQm7g/2HCrkHbL2cLZdCwvG86+ndr0QhvYIAZiJZcRmNjF8P9zT5jyn6\nwQghBMEAC9lNXm7Mg16e7w2kdF/iuhw42tdiL0FDd4qHm9jCpFRN7XxdD6c3\nL01/8hyOxgxOX4n4SGm1bGleigV59wYGsI5frG4XBtZQOQU4Q3bXwcsniPE3\nVYBWpEdrHaGcC3PTN3xHFJsmCsCeoEpqw1rAMpRzDowzkhB+9eVWIH+YAKKt\nyNZ26c7wT4BXBjCI3TBDs1uq01szPsn/nrv0cUWEVG4pzZRugfb+wesToiwF\nF0x+eYL2ge65Ay3ET9VROf8qJ4EbKK5SL9GZ1hu7924rjguuEFviO+awW4bz\niTwDkLcAXu/E9W8vw6t7YthAgikkRmXpd7xxGd6IIgTXn8rYlWkVqzGXL3fx\nDs7fO/Y/OYtLNEJrD20/d3CJJb86wa4iv7ay6fQ58/N2/puWbNv6qFXH65ci\nwPooZOrkytzSwxpMjLCDGZpcOALTGCK3ZJxjTL6aIXIiuOz/lIWyz0eXvUfp\n6r5gGKiexnDRJVP/jy4attrHbOnw7ta8YRo8uCLr0t73qcA11/8Yql5545dB\nVvJEePlpVbMXFatmxg1TNMiOgBtxAimZxCI6oMTMz01WZH6ex2M62/JRsWpH\noi5Y\r\n=TO8D\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"528b4b3a2cf6eeb24d3486eb88f0b46a34eb8475","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.0-646-button-group-528b4b3a2cf6eeb24d3486eb88f0b46a34eb8475_1541688993419_0.6917285918578067","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.0":{"name":"rendition","version":"4.31.0","license":"Apache-2.0","_id":"rendition@4.31.0","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c0da9112dea9457af8b336a432dfb55f3d0a9a20","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.0.tgz","fileCount":274,"integrity":"sha512-//TX/lmE8fAkRqsUSwqlwCIvTYWklbHWTsx9QuikK+GKMpI49fOf5CfNPdlmzTxmTaMwpT9SReDgng8m4zrnVA==","signatures":[{"sig":"MEYCIQCN68WRgJbJ/Ds9nb+mtXeD2I0TiiEsnTFyyQUzSywJ9gIhAJXi7WxI4tUS0OV/F442XQ3fBKSLH65S1syjF/12KZks","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3619802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5FQ9CRA9TVsSAnZWagAAfuoP/31EczC4A0AIpcgFt9jA\n9/HjoOGxxbKNYgtP0mrMHS5W8zdCDLIK59kRXY1SYNnLfG1qUDNfBTBpvDuN\nWnoaINDTzr4ODNb7KOc9xLElInpCUkpQ175Exl+UXCC74ngIft4z3SHAHQQo\nLQnRBlzwiCuvXe+Hi6P7Kuq/r8XotufHW16BnWTUoBqILfu1iavNXV39ueM1\nEIjBM5enPwig6JeG8iBtEG6MqSd1B7Tu9/qJxGlMX3GoE/gra+9EQ+HtiDoC\nmESQjlOGKGHsZwlly1PfaF/hDx8g49pj1AJaI9GOCaHuCVOLwQ6wAyQuK8gC\n/t73i82GlygMntXfnrOAKTkZgZpYjYbhDsxx+3WXgGgD/0gMBXsGsvdNjmKK\n/IBDXyewc2FV+sV6wJLrbNwizFY29MdShbuWmY59dwMWH9e3tUkd+TNKGrSb\nXCsUUtvwwe1plg661QAoQQ6ccaRMyhzuUkuNr+tzHX5Ao40tSLwSq3dYylHF\nHFOsCL9Xk8RaIC2nn5QQl0cm/e0dG+j6JoyfG22+Z/KR2medd9ZCRRIA5nlv\nYvrQrTQgnWnMTlTDfMMcmgM9Df1blU2t2whaakk8YoRrR4CJMy/Ijn49j8lz\nl5sQ7Jo+XI6aPjkCHNZmzwVtagQFblE5ZQ1Q4y0KAZa0l2Hmn8ziq0Xa+rEW\nB+Qi\r\n=oST3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"577085ac933b4a9711375a3c77aee025dd36a9a3","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.0_1541690428700_0.5041525823032831","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.1-640-tooltip-inside-modal-f48d12df9c43951771b4bbfd626a8d89484db921":{"name":"rendition","version":"4.31.1-640-tooltip-inside-modal-f48d12df9c43951771b4bbfd626a8d89484db921","license":"Apache-2.0","_id":"rendition@4.31.1-640-tooltip-inside-modal-f48d12df9c43951771b4bbfd626a8d89484db921","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"bf7e24cc354ff37d06cde2464d3fbca637afa70c","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.1-640-tooltip-inside-modal-f48d12df9c43951771b4bbfd626a8d89484db921.tgz","fileCount":275,"integrity":"sha512-YBSXHApv5KQ6NgZernU1izwF6oKXmZw85QduP3FHliWfMwLaCMjZ0ZUibNiHLHDqXCWui/lRJJtHms668HcdyA==","signatures":[{"sig":"MEQCIAbxUH+vMvOexaE/Swo1+50LK/86MZ+8ih2sWSo5yWUFAiAUDUaojlXdpr+eMJ024yCWMdTKN7BCUxOIx/bd+Mp8ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3631720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6X4PCRA9TVsSAnZWagAAMCIP/i5rF1W0RGRSMFwQRfTY\nYOCwVoJqUZFGp7Re5mTMleSw3j3kWMe0bVzlf5cI/CK9QM9/xHuCGoEBnUIW\n/qlJJLo1kWj94Y9LoE195cWfYcLOudc9S9A1toYAYthp9I4T/+/uectT5WWY\nOPZqFy0Ee/d952eLm8bCxGcI0/mocBXp+KrDIjSny7p1e48oWnp1u9UrTQ8V\nTRJRkMWjLx79MjLDd/vUZic+X3PDkGRjidWnGb0+eKRfXBjhMtiICPDIlIvR\nXqigf/51uN9Zai2A6yEA7HcaBv9Q+MsskInzPoL4GW+Ulx1x+x/aiaQ5aihv\nanN6CpSWiWusiD9oq4RAOlbJoS7W4ClmJNclo+kl0V3U0fGlI/6A3RTTLU+3\nFvs3UqRnfkEitaPj748Ha1EjsormA/Wezl9hwK6T5UJLsHVqciz74yRbP5aD\neOC6aevu88ZEW4ekhuUoGHh/adGxOktevr8cb+8TdUBd/Bchsqj9NNPu5TZr\n0PV+NMGnyrKpA6JlXKepkikfLzNdislnqgzrZyr2Bh2CMHadcLYJ9c5/QlZU\nLbP+P3zCdCPyCXLX/SFDOL3OG4Z17JT2t33qKUgKgMvI9PTYqpIST90rOGlG\n+X5OlMI3Gxs1zR2vtg5dWwuuWq5mJWDUTrGk5L04ge/tilyJc5sHyg26iHo9\nxzVv\r\n=iMFB\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"f48d12df9c43951771b4bbfd626a8d89484db921","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.1-640-tooltip-inside-modal-f48d12df9c43951771b4bbfd626a8d89484db921_1542028814618_0.09217840828484003","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.1":{"name":"rendition","version":"4.31.1","license":"Apache-2.0","_id":"rendition@4.31.1","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"e438e8042f99d7ac436cb6793475a52c3952705f","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.1.tgz","fileCount":275,"integrity":"sha512-ezUkfIqTGiG5uusrfuTQ0s/sk89wSP2zls576aHP8YR2oebgZeYa01Nqg232lETPawC9Jp7JyBRQLA869KahjQ==","signatures":[{"sig":"MEQCIETzSe3G4VGEv/hwbGxdevpNiLfORx72JjU8rHGLGmY2AiAt7PM2tBUs6xZOj0RcolvVXF6MWeuTQe+CUG/hLSko/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3631654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb69viCRA9TVsSAnZWagAAsBoP/AqsFXaXrt4m+EfBHK/e\n57EhLVE/WieVDEmOg+UMb1k6aozVhRI8WgEpK8Zle9fvLIKIz6005s0jT/bY\nvYsazIhIcDJi9fKYYKIJThVToxGwRHhBWosb/YQwJNDv3chCba4dduxygQtp\nZcolfIaAN+3JJo4XHOl39smnLtSJMnHObdAyhOvisOsvMLbV7Kod0YFVIbde\nS6VmoA1qvY2QECHjKS5dQXMI6iGyc0L859RzaSLnmbBO51MsRrbPj8kjL6IR\nWJj7xkxoHk0nW+9GyQ3NiVYDCLx1kUznKm5jE6rX86/zEk649MwfJSpDcMjY\nnXMLb6/vM/CGljqOxfmTdWH5URv05ZCgeyu5I4FVGd/0S+66TxwvxkexVNDl\nI7UWPFWPk7VKVwihY+bKXNLeke40WSwBRoVAq8TX4IrHaiJLyhEO9b+EyeYw\n47RPi0Wnt9a/Bg65fXN0xkBdf4EoqKGpxdq9yAeqqlPijZbuWi4IyhWxD0lS\nBEta7HzxuDicqSPlAjGuxpKfpUicu7FHvlpc6/XIw/evgB1qRBF/j1qPFF8A\nehrQcAvT+jeYP+FPKNS6MJ1W7o022DqpBmCcQB3B3aHRtfgP9tmEZqL8APMy\nsR7tofrHNYlQw2WMW56arrDDgvpg+ia/yqtMX3gR6IESj+jCG5jkaRnZ3Dv8\nlXYq\r\n=Vpda\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"878322e20455508eb4bb963652404a7d6bfde535","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.1_1542183905162_0.30095464126659155","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.2-fix-flexbox-url-488de4300b8d84517ffb64c8388a660b3f7eca2d":{"name":"rendition","version":"4.31.2-fix-flexbox-url-488de4300b8d84517ffb64c8388a660b3f7eca2d","license":"Apache-2.0","_id":"rendition@4.31.2-fix-flexbox-url-488de4300b8d84517ffb64c8388a660b3f7eca2d","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"13870edc4518ea7bf960ff303e66dbf2580ffd7b","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.2-fix-flexbox-url-488de4300b8d84517ffb64c8388a660b3f7eca2d.tgz","fileCount":275,"integrity":"sha512-nbKzS/ZO3T6aSWQ8HjAhsAglQgEnXjWFy7Qtco/v1fZ0FJ0byb6fKCkQFjR8jOyOULgkjqzDS7dnXcWj0Ng0bQ==","signatures":[{"sig":"MEUCIQDo4e93RXUimiNrf0vav8b+/MP2f9MTGGo/7rV6TAM0PwIgWZ1eULf8RP79k4+ndyAG09VqjL9G7mN/S/lCL2iltDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3631803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7FppCRA9TVsSAnZWagAA+6AP/Rep2sOwQ8qfheVYiedr\nw+Ic6ZOA8RW1cBCTe2fMjpbMZofiYtsKlPPHptYT1nY3GlZ1rw7ic70UXEHL\nT1gc4alb78Lok6tX9d+iiBL6z98fomaQJF8QBqeDxwaEVMke0QaKuUQ7anVS\ndUEUmGMwg4tijc3JevUFVGlZB2grYF/kamLkku2+gudjBPOXdAyMGeZ3aNrR\nvtR8tdXh/CLIpyOlYDGewL5JBRW6i0Sb0gWsVR5PprD04KbFYrff4MFYi/ph\noxPLJzv8CoBNV+yA+qnRJ5CJMmuc23tc8qv+yYImlccT6IAFdbE5ojvHCb7i\nBoCctg15E5r87UvOwCmnThU/BWSmZLmDbWvrUbdGLdNa3mSFgHI+AE2gBWYr\nexoRxMBEdRPycOEQBMDxeMFwwEZljgVTHpHjjXsvR9F8m+J7uSdjndXRYA4Z\ny7AK/rysbRpBIsjWj/zePVyzuj2T3FPQdFL6s1onUu64byHJUsdev+e6DUHp\nhaNgcV/G9dTvDu04XRW5WwlT5HjYnYWQ75KS2vnqS9+aaEJquV40DVwz8Pqt\nYLgi704faRlZiIbHEyFGSTSdNVDDIizhaH+6U8uGAQGCHW895AWai78ypXk7\nSoA8Wk1I0vW/7JJXXVR5MnpxFRZucXujGM9BrHBl9VrlCQjk/tzWqQVpeHwI\numyB\r\n=fiW2\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"488de4300b8d84517ffb64c8388a660b3f7eca2d","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.2-fix-flexbox-url-488de4300b8d84517ffb64c8388a660b3f7eca2d_1542216297170_0.5665086637067533","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.2-644-gfm-line-breaks-ea01b9751f909f1c1e1fa3e6f864ac7288cea281":{"name":"rendition","version":"4.31.2-644-gfm-line-breaks-ea01b9751f909f1c1e1fa3e6f864ac7288cea281","license":"Apache-2.0","_id":"rendition@4.31.2-644-gfm-line-breaks-ea01b9751f909f1c1e1fa3e6f864ac7288cea281","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6f3fd6b1ac1e675d5aba485cfb143fbb5f34461b","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.2-644-gfm-line-breaks-ea01b9751f909f1c1e1fa3e6f864ac7288cea281.tgz","fileCount":275,"integrity":"sha512-/GvG7ZHTjMlAf6ppPyN2v+WBnc1SEn675regGk3ZEHG/3ZMsB9FtYzXfZ5w2EmAGy6S05HPMaBBTPtG+IS5FBg==","signatures":[{"sig":"MEYCIQCBRiv03FA3ZIFkr0Ax3BeMwmfByHpb70sySTOdlVBs1QIhAJDX5EasI5+5vzR7SWJID13pLB2gIhZ2VDv+7Tstnx3q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3639382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7FtxCRA9TVsSAnZWagAAX1AP/1ErziqhqD6obNntp8QS\nm1NCu3tvFC9swh4Y7eUJERuHwHsKL4YegOwzI3/+hT36MEWwZpCP+nhTx0XJ\n4nq8sfG95QkCEEjz5maWGofqZ3a7Mu8d3A/cIG88qcAnj/gDkdQdjuj996Jn\nW5jdZaTg/NlCWVeuaXdHQ2pObCOg62GDNc4C9PckWUHEDwzUTJYCU60OgIUq\nMxqguynzySuQ0woFZZRO8fzaC//56K7sg/58ebt15788v2HZHu65BOgyoU6n\nPNQayrEb2vVHrxp8WqfVxOnRhu8k1qBPAGN1//f/I8G5gv55piRGFUMq8Oqu\nlp0x3LMPoPN9yDbYddzodDmsXW3vBCuH4WvC3RHfown6tqfsnBi2iDvzSZs5\nexIVIY10gDzXxCfw45d8XVN42gFrAKJRxjL/6uQ3GxvLG9uVFSAvWcuW83AD\nLSGcZtMMLFtOc3YfpQYio4kAugjZyrdihn/UKtgSxVCC/tEvKc1Kw+OsfIEV\nyOYKRZtb+TyTfn/IlpFh/NPF5ESfsod6woAKOLQvysnmho7CPTd+odg067lF\nsAA2OPZ1KoENIDzC4Mr6c8Gx5bf80mU/2SIfyZRD0WZ4xoJTocVsUJHka3IN\nvzvDgWTFpSAGxgHXkC+KjX2CwvsL0mQHb4aq3vUG+UX0TvFJa8pNBOa4qU5F\nq39Y\r\n=e3dD\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"ea01b9751f909f1c1e1fa3e6f864ac7288cea281","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.2-644-gfm-line-breaks-ea01b9751f909f1c1e1fa3e6f864ac7288cea281_1542216560619_0.6985893140107249","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.2":{"name":"rendition","version":"4.31.2","license":"Apache-2.0","_id":"rendition@4.31.2","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"0dc320d13e2f4727135128733919121623ae2273","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.2.tgz","fileCount":275,"integrity":"sha512-uApoMWtaflzKdQXo7uhf5V1IlYh0AeVcf4G3/POItxXi7LPPa/FPmttKO68FQdx4M4gilEcBE7J2BKz8yu75aQ==","signatures":[{"sig":"MEUCIDC+CQfs+kMaIxDbl+Z2zBJOxG8ZDRWrLF1Z0wu05rzHAiEAkuw0iYjHAGMDetlPkHYVZZDFCUD5jaQZKhnb/Fb14ek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3639321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7F+ICRA9TVsSAnZWagAAYsAP/RfnZv40p8INXq2HGMkM\nAw76jJvBISrJNSxHfOSr6GLqtvRwMnNpcOmJ7Dm0oDpLNn3tz7xGW/VXgaW5\n8eZL0fRDV2F2ym3qKsDlNl2wrTRv7ME/eox3kArRIjvKBdgxqWc0Eiq1Ww/3\n7oLTho7uyxKO24hHr4Kr2+h4X05Szs1bp9ZqMLZhDdZ/ZTi4z2+vyVTBL+8f\nWmtJlLW3KzrnTzC7C93XArbzQacBPpGOLH3IZaKGnw4f268urp+qH+p8VaE1\ndJI0wkrjoS2KYQXDwxJMXMLSRgs+qd11vbkJwPmggo+TpILy4PQu5nVAcvZQ\nQookCBMABa4+z0BSlNzZ0V3a1jVQjcwLS4goyGCvlcM+0TLP+53ajmygy2EF\njJYpWXgO8yQJzHMePkMuQTXR8YfsAfCEBZ/2mwUfMzpaCe0ZVU89pnYtIbPE\nuIDdOTwTWnSg2EVK3jeMj3F8h7gJAppYNJhS/CbHk25S/9j/2koLeIdyt/NV\ne+vvCwrN/Jszs4RKB0F+XUsfzFMPqtct4a0Lj7l94XPpsboJDdhRgf8Jonoq\ngFxm0ViQkZ/zFD2P0YXJPsF4ZPhufi2ukH3NQsZeKcWuzkVfPNy3Zduvl0ei\nr3F7ryq6HPBK8AGw34d/ZmRQRhfjQPGXUZO6PnFJeAexE9ouj+VX0gmcGdYO\nylqL\r\n=oQgw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"76a367ee6129e9499722d4b619b8ba57f24fcbf4","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.2_1542217607090_0.043193827229023984","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.3-594-add-documentation-card-e9c30a71c2e941271e701fa633cd17d26f647c62":{"name":"rendition","version":"4.31.3-594-add-documentation-card-e9c30a71c2e941271e701fa633cd17d26f647c62","license":"Apache-2.0","_id":"rendition@4.31.3-594-add-documentation-card-e9c30a71c2e941271e701fa633cd17d26f647c62","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"82fc987c89fa2f06a4dd9d2874968a6e752d5b04","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.3-594-add-documentation-card-e9c30a71c2e941271e701fa633cd17d26f647c62.tgz","fileCount":275,"integrity":"sha512-r7blCUz887fUjeCIr7Rx8h47X9n6A5jI314fqL+MI26S44LTdY4FxVDM7zNdYPU13DTRruLnJiE62X3OM3dF3A==","signatures":[{"sig":"MEQCIHzIDRaOOYiFV1IVavb6jFCGBJ4KqxelLO8sitmPUo8HAiBSrri46XMyCZDhZLLdj9ttRdHD4YMDGuhEfarH/XnJXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3640319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7GO/CRA9TVsSAnZWagAAaX0P/1Pye5gY4wXtYNRBFtjp\nO1t/H1ceL70f2mzFUCxCaiYhR0Orwl4iWoZ+KuAhRY/FqS/NQx2MYy7fy/9g\nH8xldyyjq4h3hkYxd2PP7Pbm1gAkd7rx3JVcpwNLP9T8WlQkwN+TJorX7te8\ngd1GNnqvBF3dVj5XogWYNd7rh4/pUznypCQnynzsvMrsRT3FW/a2BA1Eh8SQ\ndGrq9PoLzK3XL9+NPTkiXw7/OO04TjyIO/ehb5rDoz82+trL5Q65HDyo52l0\nla+cxxOfxnb7RAA303bRzq61XF9qPqntZGjh1mBJMWhZ/MJbsYKMgmOphNMA\nahVZkQHRM3uN00fCkoC9BPdYWlEFjK8YolRCH0HIqP6aGrtQgjqAFSMoOD11\n+bsl/SxubhOdULZkg7TLv6bgclEJQ8pb7jEVcRVtbwYjZqLwfBThelORje1d\ntpLD6QMQ8bP7zCIV6hmRDq4znm22lhlQuOOPl7fneTKk/qNxuU5Cg627SP7b\nxlv3CJ3+KxmSVp3Oznbz05XV+mRrZCBTH3trXlgy+lQ4ihyuo6LImh9Oidg2\nAlxdUXDBeKnTNNcvTENnchgFzzlGbZISNJwr31N34p34U9S8weR+2ocwNYj/\nxVlPYlYc+1xEIADPD3hbQoLEBftpZuQdgP+o+VnZ5z10t04PQqAgUmK/WNtZ\nVx4+\r\n=97sm\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [Card](#card)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### Card\n\nSection containing content and actions on the same topic. \n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Card.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `title`  | `string` | - | - | The title of the card |\n| `cta`  | `JSX.Element` | - | - | React component added to the header |\n| `rows`  | `JSX.Element[]` | - | - | Subsections separated by a horizontal separator |\n| `minHeight`  | `string` | `auto` | - | CSS minHeight property |\n| `children`  | `JSX.Element` | - | - | Any content that is internally wrapped in a Box |\n\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"e9c30a71c2e941271e701fa633cd17d26f647c62","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.3-594-add-documentation-card-e9c30a71c2e941271e701fa633cd17d26f647c62_1542218686579_0.3905338354092538","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0-648-button-with-active-prop-28432fc5249b7e7399f3e49d1c2097022d1deec6":{"name":"rendition","version":"4.32.0-648-button-with-active-prop-28432fc5249b7e7399f3e49d1c2097022d1deec6","license":"Apache-2.0","_id":"rendition@4.32.0-648-button-with-active-prop-28432fc5249b7e7399f3e49d1c2097022d1deec6","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"84649ce5efa8eabbcb23d85c176147f8b26e6283","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0-648-button-with-active-prop-28432fc5249b7e7399f3e49d1c2097022d1deec6.tgz","fileCount":275,"integrity":"sha512-Z2lXUjov8fm+TugIqC9WLkHHuKn6VT0fVt96TFMIDdU4mlsXmnZBWZVm1ZFFTBG7FvZz1xDDco3rDsVWtsATDw==","signatures":[{"sig":"MEQCIF+UmuAWaXxbyhLh7zUN8VIXbeSh2xl19PH5XEBMlbasAiBQZghB0pUd4GNVlXvIc22YARTQ1jWpQk+bkYBM2PXbVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3640812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7WLdCRA9TVsSAnZWagAAsucP/1252aJBRLs2VNu0f/F0\nzqDfJ+1R1q+Tyr9+ykOL1i44iDh77WFRY8upfiGqN9e13e4kYX2vtibY0Q7G\n9yv4BdkZ/GZcb6GxBrVlp9fjKTnY4zBeln0kYZDDJRfoa9KhMneCbITgUZk7\navP328969DrP7tZQqCt0fh6UbXwZIiKeatlaSl6qi+CgB82iU7UdGolLSR0o\noA5v8+6MB3XB0TlhS9PclnpnehNoS2KcVq43oWxPAu0pha0ZnG8PDkErp2SS\nWTJ9hs3NOwbCSY2yYALcWnvmY3NgcmAFDMx8pCBvalInl6h698PVrz4l/zAS\n6smHqgeeax5pERmBhUw5AeK+EJRKzFdXhP9VDzIe5NEA6FMiu12BFUT5EVc0\n4k0r3K5iWTI9S9JOpAW4pkLc5HSu8J9phq+8XA8ZT8q77v6JVrzMjJDdFBsk\nxpQniWGl9KhJayonZKOqJwO7NOxF6UG1tZUVvQwgWQO7fGk3CZSVcGejRpF9\nBT1Io9O6D1t7qU/Oztmh64jH3KPdTVU5xpqluGMh0q3Z0+7LPQP9QjNlAQ31\nfVAPrEl3m9Gp78tl7235qotZ8Fk6qlH+E0Ex86dWVObTAdRWlRakqDaF7nSo\nALIW3omu+d57tjIVp2ZhL+ZJ+7z/1wKxu0ZdxFrFG+A2n9w77yytbYF7elQp\nr0P2\r\n=jwxU\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"28432fc5249b7e7399f3e49d1c2097022d1deec6","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0-648-button-with-active-prop-28432fc5249b7e7399f3e49d1c2097022d1deec6_1542283996757_0.04763132717553398","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0-67-codewithcopy-normalize-input-4daa8e845939fd17752b54aebb4a65ab83ba3ace":{"name":"rendition","version":"4.32.0-67-codewithcopy-normalize-input-4daa8e845939fd17752b54aebb4a65ab83ba3ace","license":"Apache-2.0","_id":"rendition@4.32.0-67-codewithcopy-normalize-input-4daa8e845939fd17752b54aebb4a65ab83ba3ace","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"14f9d2d41ec8d8582644e0132c1ce395f78a98dd","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0-67-codewithcopy-normalize-input-4daa8e845939fd17752b54aebb4a65ab83ba3ace.tgz","fileCount":275,"integrity":"sha512-DeS0eyUzMDyDn/HZePzVxjbfjkAnP+ro7+e9ZY/6B45LdQXdwEfW99oi+LjVUVzRzgd6nMjImkPpfxP3Zd1l9A==","signatures":[{"sig":"MEQCIF8/Lu6aNS9cALXLiV9ecPPq0p9LWzizmEOt2P5Y3V3PAiAZNzgvUmtfYn9jrsfzEYLUgOp12sdl7qryXzaiUoDzyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3646706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7Wm6CRA9TVsSAnZWagAAeu0P/3b6DXQ+CtIOQF30eGt5\nXqlQUWWHAj1pHNqqr0c2Wv7TQLtVRSEbrCGgErDOom+gsBlArk830TijwAjv\nZcAgTXRvmxGjcNZUvCc130oM+XbLyWnHHua53/BEyhDw5zp++srEeoqZlNU9\nN92aQvAuJTT22aOh21vFakQPqcWQNTQQeFXnZLzW7tMw1cpEdOx75Wkz0NMd\n0SrLL4IXn1xQT08kCNfLbQnkmM+LSyTWDUidNoQ7K4ef2KyPkjKjD//9ctSd\nkKjxBriroR7VfZxBGIkiwgkSxNENAu2vLp3bgX+7gSaluSb6G8xcFokqafvi\nOK9ONi16GHBXW+CcWMfFmvGLrbzFLqw/HSCEG2ZLh0R2JyYti0wC/1X0WFJY\nlDh3LLeLg35wxD4vV7mGp8HAH69PFiMshalMF8gkogAwej60zAu6+PUNtTB1\nuvLVsCLq+bBNzZDyXURL8tSDKNnMf4dE/mh1c0sap0h6hobv6bYHttNabBjt\nZ7DCDsiWfo6RqTM5vM02FHsh8oEMaUGpOSEwIqsBjV22i2TxO07egEML7NCW\nfMijoGChGCZEhqL/T7G2A3JWKaoEOee0Wm3P+Fsie+1i1oKlkgYwbmn6shD0\nlMoAm61AgXg2rjNH3KfPiio4KScfzgl2TWv/X2MzjkfDtOr705sDUA9QXZhc\n7s21\r\n=Dh6C\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"4daa8e845939fd17752b54aebb4a65ab83ba3ace","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0-67-codewithcopy-normalize-input-4daa8e845939fd17752b54aebb4a65ab83ba3ace_1542285753788_0.5562470566482465","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0-648-button-with-active-prop-776a5e018fc0010cabace9fc4bf30aff6af96a69":{"name":"rendition","version":"4.32.0-648-button-with-active-prop-776a5e018fc0010cabace9fc4bf30aff6af96a69","license":"Apache-2.0","_id":"rendition@4.32.0-648-button-with-active-prop-776a5e018fc0010cabace9fc4bf30aff6af96a69","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b4dd4c76fb412cb14115040a1e2b813652dd5b55","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0-648-button-with-active-prop-776a5e018fc0010cabace9fc4bf30aff6af96a69.tgz","fileCount":275,"integrity":"sha512-QXY/5Op09XW34Pw7S0px7I/HY/mEUD1nrHnNqDqLPsbSjJ4krClJJOGOqP0DMI66rqsW4hc7slLdyYpUop4rXw==","signatures":[{"sig":"MEQCIDW4xk/2QP5BWWQmiQhKuZTPWnFgW1u+p8O9UA+CIk4JAiBhRh3h+W4cSPRFjGHvaHAXuIDayRN6dsTdnFCSLLauDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3640812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7XB/CRA9TVsSAnZWagAA3vEP/29vu57LaY4v78qcUK2j\nOTU76jxduSTU4H9fRnnRc5e9TvRVs+ZJ5QpmkyUrssovG6G0Xs5dW9lu4KT7\nkqQgFv5q7MsQ5wUAwNF53bN3rUytl8/ViKilqm/y9vVev8zyX8ajWU9X6XFZ\nbUGaUP4DmAvjEPyDmk6dDJEGYcdQnfLgqw+rCXC6lk8pAMRVlOR3p8EpCS7V\n56neGikG0npAc+JI1y+lmUaadQSYaHK5OnA4faihyxOqmQIZCaj0ZT6XNLTD\neYRyPeujinRmKaW8nDvIz2lQV8ZBfpG8DV2AFX882tW+a/PNxAXipQyFUeOk\nCazdxMYtmrZYXzFEVXVejWmHtqf4poDNOR9b65Oy/WwMiMePN6ltwpWy0f/G\nDk+CGq8de4fVCn20s/d4RwXUpTr/polJu8xPg8biyA8bT/3o6ZxagUIVVkjA\njMXE0Y0HXuGSf0Cv/7/f7XV8NtFL1x2dGaVnNHDAyI9hPnYisI8thxR9uy37\nknt+84vVbHDeU1tyn9rWygfyZ+xdZ0HswG4mtn038LpSmEY94f6dXM9Y8JQb\n3M7uVJXXNK20UguZ9XdmmgxIaIMem2JGBQKV46Bm4T0kMEnDSn19N+dzStvW\nC34nZz3bs29E+vXSK/Y20euTAxi2LCG3tWO4++YUWxyQhMDPKmajhBG5wP3z\nc3qa\r\n=/O2L\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"776a5e018fc0010cabace9fc4bf30aff6af96a69","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0-648-button-with-active-prop-776a5e018fc0010cabace9fc4bf30aff6af96a69_1542287487126_0.4154306762660045","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0-625-table-horizontal-scroll-issue-ab3d74d818ca7179939ffd8a761511e957dd1445":{"name":"rendition","version":"4.32.0-625-table-horizontal-scroll-issue-ab3d74d818ca7179939ffd8a761511e957dd1445","license":"Apache-2.0","_id":"rendition@4.32.0-625-table-horizontal-scroll-issue-ab3d74d818ca7179939ffd8a761511e957dd1445","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"5626907124c43764db5784bb1294bb2c5294c254","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0-625-table-horizontal-scroll-issue-ab3d74d818ca7179939ffd8a761511e957dd1445.tgz","fileCount":275,"integrity":"sha512-R7J9h0Qe/hV80MqEEefBRFWJfKBnvsrOFMc3ONoBlaNWxoMyHXIQKoi50TBP47EPN/DxpUOX/yuLxfeapLRzoQ==","signatures":[{"sig":"MEUCIQChzPkEYF63F/zZatettuBgrFFxFKdgpxaRy0OGCUt2MAIgOck9Oqhymxd0gkIEJJeDB+757KdUWWFxIZinClGzLrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3639894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7XifCRA9TVsSAnZWagAA03UQAJPNdgF3H9nLz/U/MCm+\nqfrNpDHEYJ5CcMQtSjBSqiQN73isSBido2rfLeBKXc8ZbBOjP/+F+ZZ/u5sV\nrMLtk1JKqukRS1+Sslbtf85Ymg4da3lL5/hYpHXE2ELUUsRh23M4SmJfNOD3\nuD5T6i/8amDcjHYf+Ag8bgao0uVLW8HCo+HBOfhqjd7Fs/LvcVXkimC5DL70\nM/sQHtbPntKSuthgVooskI6jkH6VIos+D4u+BldaJYpyj3bHT477GIjtRefb\nAh2+EJBP0HMRRFVHe6txl1WR1MMijfZTTdZonsganjqEqIJfBWJpkSB2zNl8\n6+z1rcJ/+SRuqloVMLh9LiPRg9E43shlkTFli84vfFINf792ANdA78sWHXEL\nma6OkttixMfNblgvrSoQTGOVNiy8WraJ5WvlRCZfLXH3X0BZrt2Cs1JSYoJj\nbi3aSjU/pCDUPkSclMGRUeTvxwJGXrSJlGRoFnis6GMXa/61ce+HuTi1H9qH\nKFa7YnxgXzGSUyCcSJkqWsbn2OK74Z4SjFxAFR/8r4n/FUYFUrTBCpz7/iKK\naOlj/plNptfpGpS6AInBdRRZI1BPGQfl87/Wm07F2+s6x+0Jav9pfTuMy/df\nK6jpZw2K3+XZQl9gUNnX3Thx55vfMrpOVGYCI1n4ufSiYlObfDDq8CDUNk0F\nPFtf\r\n=yIm/\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"ab3d74d818ca7179939ffd8a761511e957dd1445","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0-625-table-horizontal-scroll-issue-ab3d74d818ca7179939ffd8a761511e957dd1445_1542289567072_0.5436729932196904","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0-335-add-whitespace-txt-3b62d0d37480f0c3f892064b093d902b3c04447c":{"name":"rendition","version":"4.32.0-335-add-whitespace-txt-3b62d0d37480f0c3f892064b093d902b3c04447c","license":"Apache-2.0","_id":"rendition@4.32.0-335-add-whitespace-txt-3b62d0d37480f0c3f892064b093d902b3c04447c","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"42617b83e0075d6a23d9ecd501915228dea2ae44","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0-335-add-whitespace-txt-3b62d0d37480f0c3f892064b093d902b3c04447c.tgz","fileCount":275,"integrity":"sha512-eAdTBNnwCznl+9azSGnurdk8A2kWsU+EgWsiOzt2tebEhNaH+oBtFpm+VQCyd9vg0gTzTIsddHUlN3YbPU4jkw==","signatures":[{"sig":"MEYCIQC/O5W9YVpc4/g/g5pC9G8215xtJ5mLwpuuyHqu1g9X8QIhAKJpYbNJPZnIsIl+t5yvzwyYqZe5J56QwAWTWOwVV2g4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3642225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7ZlXCRA9TVsSAnZWagAAp3kP/RDgBPO774ZpWVYM8y0i\nxyXTw+48jJnWo3/I0+2sWUfTPM1wopqzl2DstdrzTGdv8bbvrn7exEkCX7nb\n0j6G19zBMzc+7iVoJKQ7udPbxYtxtM29jDcHUgCbyfrKfbp74+sIObObhPlR\n03mjeJRcNaJiOhIHLVSzqPiKc7DmsZqwaC0Sf9k8e3CDyEjxF7YS3MEzNq83\nAlAC7yD6taRzz5U0/zzaPqGXBqWeScAEieEP21L2AUTpk7zU6Dgj4cKSFtOA\nGdWPyTcizdUSWD7ktn4YLDJRknk9rQFyWW4p7n/cz6WOvOkVn0nSIx/iM+KZ\nYibrBRurVmspAbUmKLIz0AvfDN9QAt5LISj4bef7epF9Zp6wnq76ifqZbcJu\nspOFN9Zz3RJ4GL5m3M6WJZZQ26TUUZeFbpGumbld38X+kaeM7PVUjyXg1X7z\n3ekPon5DCJWn7kxKCJ8Q6HqaOqH/eKCl5FyH15PjfGNZHaNMTrFchp8TFz+U\ntWxaprDuyHeMRf+l0uprdK7xu1f/ofpPNHMj64htBUlgsg0tDwD0s1QNFuY2\nMTVTOe6ZFQEwfUKO27CZlEeseDIPmmRAIlrV8ma3EsfWk0Q+crT+xRQzOVmC\nLGHvNNxFVwz1izdeR3MU8NHnFFPbq18INPXnQmeyGoDxlQuA8/NCtuSSBEUp\n68ry\r\n=/izy\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `string` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n| `whitespace`  | `string` | - | - | Equivalent to the CSS `white-space` property, one of 'normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'initial', 'inherit' |\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"3b62d0d37480f0c3f892064b093d902b3c04447c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 100000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0-335-add-whitespace-txt-3b62d0d37480f0c3f892064b093d902b3c04447c_1542297942595_0.47905830569801466","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0-326-set-progressbar-default-type-cad58f419d2c4ff154b100e76453f9355e0ba7d5":{"name":"rendition","version":"4.32.0-326-set-progressbar-default-type-cad58f419d2c4ff154b100e76453f9355e0ba7d5","license":"Apache-2.0","_id":"rendition@4.32.0-326-set-progressbar-default-type-cad58f419d2c4ff154b100e76453f9355e0ba7d5","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"c67f98994a8e4228616c2ae0c3a6cc8c1faf5bf7","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0-326-set-progressbar-default-type-cad58f419d2c4ff154b100e76453f9355e0ba7d5.tgz","fileCount":275,"integrity":"sha512-IgimKzPpSpd8QCTCGzlDLwcGwMhJYfVBR5R7p+l+alDzbR1DZVxs3MAzLRZ0jFhWNfDcZ6IBvl/UIrmdDdtlDA==","signatures":[{"sig":"MEQCID+gpXPeK8hZdYv0vxuM5FpKg5tEmY8kyTXcYvFAX/+ZAiB+Vazavoy7Q0So7tU8hqE5BJK8aq8vx1GXeJauX5GCaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3639567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7oryCRA9TVsSAnZWagAAb2YP/RuDVL7YTZcZ6bC1MJkD\nIOdqdSvIqpUDkRKHb+pzo2e07fNkFISTcuMyvNQYr28mXJLIe3k35cySMRgv\n+rDEVSpBBSRm7MQ6aoNnAHxHwDu/0VHcJ69AAMZkQc/jqCX2aXAADQWHnM+8\nxpXCJ3+tdLsdUcUsOJw9yPSR3ez3glHU9ML4A2CcpIRSqqROiBIoy5daeKHA\nx2h4wt9YBDgIglyV0T68N5APffJjVyzjOoq4kwkZloKkAgYlCICf6B9LMapj\nn8t2miMTFWrHl7itfdHRatVJ8I0IgWwUNKiHcVkFcTT3onwkYiS1uvNVtInM\nq7TiqpNg914+099eayAf7T1Lb0EN6bqO8Kww0bT2i1dKvjI4R/vlAA+2vnS/\n5WSL8vmgh3qKXg60+iIVuYYyLPCuAQZVoIPCCkSWVQMt7sWfWRkIgFLzRnjW\n4c6aeBeZQv++hiWukkYemkfK+69fvC1MwzudAY2RoyBILRu9suoy+b0mDC8k\nQo6bJZySQL/enmXacNKQnz5z03qXBi4twhlOjKsMb1z0fEKek8pwJ9ZueeEJ\nFiHVFRHaWmcg/x8OjYSb8BZv/PiAj2pPQJBPT67y6ZYKw9jjTrLjf7zI/jXt\nsJSuwAZH1SXeutSbLjAMuXxnVn7ftV6i9keQK8qkxpSCBd8NqQT4Dq8lb5Mq\nu/4d\r\n=fswv\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | `true`    | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"cad58f419d2c4ff154b100e76453f9355e0ba7d5","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0-326-set-progressbar-default-type-cad58f419d2c4ff154b100e76453f9355e0ba7d5_1542359793404_0.2789743665352713","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.3-657-resin-ci-docker-aa9a75c8d7fd11a21d6ff2d40e62dc0a718bd2f6":{"name":"rendition","version":"4.31.3-657-resin-ci-docker-aa9a75c8d7fd11a21d6ff2d40e62dc0a718bd2f6","license":"Apache-2.0","_id":"rendition@4.31.3-657-resin-ci-docker-aa9a75c8d7fd11a21d6ff2d40e62dc0a718bd2f6","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"1ee83275ed5b6a8b8908492cfa7a6f14696fc888","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.3-657-resin-ci-docker-aa9a75c8d7fd11a21d6ff2d40e62dc0a718bd2f6.tgz","fileCount":276,"integrity":"sha512-7RjGxCE2jl3zA7LD99GN2/Qevuj6LebouCWEBCQMDP05L/QmJcJB+6Du+lNXqoN7PaipdyvXH4b7CBYMFdFATQ==","signatures":[{"sig":"MEYCIQC1SzNH5iRufZh9PyhrrJFH0giTpNHtpGs9UFHvsdcqQgIhAPwJWH6Dsyh5eKs9jV3MIGOfJ97k/Rnk1nAr+iMdT/Qp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3639501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7ox5CRA9TVsSAnZWagAAQxMP/3cSBnocYxKwCGj4noOn\nf4t7qwJUTyxomnHwCu4RrHITik0sVeTddIlQiCyySOT/wWXDO7du66JlEJIU\n/b49kNqP4sORa3vJHFEER510jRLbhBKRlwNWDJW4IXwxJzeasyEOz2F9PXTn\nKuB5DPDY/zrrqgp7faiAKHd7T9K+Z04Rq7Gb7tZa0r9dBwZtjx8cnPIHbrnZ\n4zx0NmD1Q6hlI5ulC60lLgQJQRgnL5m01YpNQ4tUDqgs0+5arhoaeZDzI8r6\n34KR6vf8kR+vqxwG4c/z24yUbI7hpVCpMfK+mAAgWuaRFV/876X2uZ2Zo+Zo\nDHU27ttfOBg7BHkb8QMbk+FP1Df4LerwicmrTQ/gwxEEgKeEG/BHCoTLLsvp\nigLlsu2wu/1RE60bxav7hIF6Rc2p9sx5qN1MCZlCGX2RlMVi5LgPv9kEqPj9\n1TQwgPTj1PaftsdA7jZ3pt5Dv7Z2DDC1evBUWwbeAHJcDf2+jcAlp3OTYd2G\n1KNW2z+NIeRvKhBFZHmpaNzLX3i9ZFT+lMLkvMto95/wpxC7ZohOIS/4bnc2\n5BZl5knum1Py4mqhYVTZsJcyvT6Qyg9uEA52LfjPLoXwq9ADk8sYXbcEOt7O\nlRXP2zRY4uOvT072lRyFKihRHpPVF4ZXw6FHnd/LA9vGk6XpP8z5cCvkoDYw\nEwsP\r\n=DHhv\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"aa9a75c8d7fd11a21d6ff2d40e62dc0a718bd2f6","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.3-657-resin-ci-docker-aa9a75c8d7fd11a21d6ff2d40e62dc0a718bd2f6_1542360184606_0.436402067865721","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.31.3":{"name":"rendition","version":"4.31.3","license":"Apache-2.0","_id":"rendition@4.31.3","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"b626f749f3e5f07c9cbc4848a2222ab92c03e5ce","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.31.3.tgz","fileCount":276,"integrity":"sha512-Nktgk3mcn7PffSTT+XiFQwv7Mekw46G6SB/rQVGlaAcMVRdZiMyAsqYovgIeT1/64S24u2sE7zw8CSmnDepW0g==","signatures":[{"sig":"MEUCIGbEHssbQ1ZhOU3pw4kx7b2CcukVV7s1tzx53D913CPGAiEA3py4s3cAk7yPGKFUMY/NquBDn/uEYUKZsJ2MikU0u0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3639440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7pxLCRA9TVsSAnZWagAAPF8P/0bMgsfWpNGBS9yOR+v5\n5bQkhyegWhOkJwELw537NYwzR6R9exo1RAn17fRzC/e/ue2lYwZNHSE+GRQu\n+yKjsWLBH5OcoK7Oi4zbErBkoqShWtvNNcGtxSs8Pt5PAuzaYzLKfcUrg614\nszuzFGCyyjvYjdZ2uoYUMJ1yO9oQ5u9hVoUxfpJh8NB5w5DIBJkWLJ+s2B8b\nFQdcx/qrXEqpEoURA/95M8Lm8KN6F2cgUC4HJKvUQcZqJFOjZEf+6vaxCzuT\nc8KsMkuc97h1aPalJG1IvOnrIS2Vwo+lJiBsT92CGBTfVgJq0mEAi2H9NTSG\nq8QbvV9YHTAy6WRhsl6ejEDwoNcVWnvFyTZ8sQ50BFPPhsFXjrmv4p69MWOV\nbCsdxXrsUQLpnWXbwTIJlSrGZ1WQGv1NYtxtCwBbl6b2U+w+H4V7/sa6IlCG\nFr7xXsitduJeAa2xY5uHaKX4n2Ci1LNF4TWI7qFLyo2Apmn/wstoYxWYVIdD\nocQrhqGFMAOUn5kA9idfSefTUWuZoH8ZoONOUIjrknjLJeAA23053mfPVmcV\nKJKGUJCS4+ja+kWuTDzHF4mDHe2g4mRn26hK+NTVKKOMJc4UIu6tdU3eaY4W\n2rENMrTqoXP6Lydx5by5vg53+sXGpQ6G5s1My+1IYeyu+i4l2WmfwqZxJHtv\nm4Mr\r\n=1vuW\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"f1c01e394b0facb34bef29094bb3b11e663e2b12","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.31.3_1542364233714_0.8413252025314282","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0-67-codewithcopy-normalize-input-05da1ba9d8f176647b7a2a35d31b11bdb7b48322":{"name":"rendition","version":"4.32.0-67-codewithcopy-normalize-input-05da1ba9d8f176647b7a2a35d31b11bdb7b48322","license":"Apache-2.0","_id":"rendition@4.32.0-67-codewithcopy-normalize-input-05da1ba9d8f176647b7a2a35d31b11bdb7b48322","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"d4b4ffa85a2717b0c96cacb98eca01fa3339b57a","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0-67-codewithcopy-normalize-input-05da1ba9d8f176647b7a2a35d31b11bdb7b48322.tgz","fileCount":276,"integrity":"sha512-Fdp/pbTvfO6gYgooP9Frpe9wglXVWILgOjYX4WoSxVvL+cRRERSAzrqpruz7Wdqzq25lmqP897LQ3WO+5UltsA==","signatures":[{"sig":"MEUCIQDzi0iIO+AVna9xCLHDXcDafq3IPXxi+ZlKfblZAfw8DAIgP45/JMYZC7uolp72k+9oK+Vr0aOfRq6DrFCgFSPR0Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3646825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7qlKCRA9TVsSAnZWagAA9JEP/3FCXgpMnz+ekcp9hmcJ\nizmlxGGKoYSwe0IcoW5OjzNclbC98tvrGccSw6wLqbtaTLWgUiz9yxkQtIuk\n1p3YNFTlSZ6TZug652uRs/e1FHpY9Y7YxYBvi65SOE4P3tszZm7MT0LHDSBF\nRfiA/mzQNc23gEbmm30MEL1yNd25xRv3mja/l+gl5TrE94f2er7iz2Upg3oz\nBqKcbApME/X4ufAt7Mm5VUZ4KOv3UoUKgeVRGtf2dxwZKKapjcgVAcAfbvSB\neUSxfkiTYw6f2WrN2euAhQlOQon/E577oiY7clfkGJ7muMygBUbUUBUevEeS\nyy829LQ6PbWftorFP1NkT7geC+jq+XBgR7AD6KnBs0pmDcemqK/6iNDK4YT6\nPn/iTSIVNBPjIJxMvdY+UsWnVCqWwG9lDolgRzMI0UgZXtSi/2qy3GSGbeMd\nx2dbCHSAtRhuhVmEKROl74DGhn1hnuGddaYaPSGyc4g4gpNMjuPK1wlJ6j5I\nhrz3HIwHssHte5sCPHX6jlZnv+c0i9OR6z4JrhW8jmQkyDNr8fRYm5qnZsAd\nJgc9d9sXgfb0mST3nSsutBWFkh0TGzD8xRm/pqMT8W4VSz/r2zSdPY7o/rSm\nTuIMOudKXDGqHuZPBA90l24dVuk+U+DH2fNVn2Iovtm56cAOe05roDY9lZ8L\niG8v\r\n=Ypd8\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"05da1ba9d8f176647b7a2a35d31b11bdb7b48322","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0-67-codewithcopy-normalize-input-05da1ba9d8f176647b7a2a35d31b11bdb7b48322_1542367561658_0.100054936853756","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.32.0":{"name":"rendition","version":"4.32.0","license":"Apache-2.0","_id":"rendition@4.32.0","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"67bdbc91769d1731750278e618b45421ced885d5","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.32.0.tgz","fileCount":276,"integrity":"sha512-6pCGFjPQnNRnjx0ozfxppPnDKLyd1DlT8u90Mef0i8FYPnFwtCj39koYd6HeltbLUQodh19koV67UIxpGMdNzg==","signatures":[{"sig":"MEQCIHUFXLwVuJnLDhFREkjLMIlsNRf7CLlYgJambvcmNg2ZAiBLYu4IDJe5gJPrcRPITnpK8fWDB6l8/uW+IrCWzfvEmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3646752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7tz2CRA9TVsSAnZWagAAjUQP/0YmIxeB2MGcEPD7WgCU\n96CZG0AnIxy/ftWNHZrK7tXYWtpTi/HPEq80/TD9H8MlOohpwZG6RJNMyhBV\n80arH85ZfLKsZ8gG01BMDgxgj8ezM8eVX7R7NaJGqVW61AIprh7ekeqJ9kTX\nCkIWsURGY+04IzlzeE7ZpDPBYKZj+qAVSQECVefuFB8n3UWpMxzNPNMnsv0H\ncTBbPBdZ/1JkEyZMj8W2UtxajoPDiE6oh2VhIzyZCWbpaaRr9xwdK2Dmoan6\nGVMTACjQtRa57rtxeQIhskm6maFwkZbct8wRx8Os9DkZqGBZMoMCwmU4skBl\nKUKVSNtK5YFZAM8zLtze80PhJUacWOX3ndL1kGtN1BHIU32+nyAtqnOwdFpj\neVOWgVTQBNR907cpS/e/PI9e6Uwd8wnsyJA7D7FlC6xCuBW8OxPKCVgb6hC+\nmBV/wrc4GeW+n/6yaKtBgK+HWtAtKz06sf5OfRA3zxZ4+tonvzFQJKO4081q\ncGuOKuD4WeEgG1HOfhDJVQhGfeA9GWr8AZyDM+voaeWnuAW8JJeVOkUutsdA\nOT76fWmIedzHcbCDxJR7dSV+4iOJW3efu4Knz7JKDhHb9V0X7EP04aQibSVc\nIDlYXHCGOt2bydaKfcm3y82xobgJV+NMpxVLeNHOzWG5hpv3ESQ8tyqD+5pq\nYDN3\r\n=gLvd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","gitHead":"506819f324bff5eec63b10fe5c9f3fad59684ad2","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.32.0_1542380789276_0.5945617745494203","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.33.0-326-set-progressbar-default-type-05114dbe8229e5969805c1e6c0888bed744fb16c":{"name":"rendition","version":"4.33.0-326-set-progressbar-default-type-05114dbe8229e5969805c1e6c0888bed744fb16c","license":"Apache-2.0","_id":"rendition@4.33.0-326-set-progressbar-default-type-05114dbe8229e5969805c1e6c0888bed744fb16c","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"6cbd6594dcc1e013958db42a22c92328692e7ee8","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.33.0-326-set-progressbar-default-type-05114dbe8229e5969805c1e6c0888bed744fb16c.tgz","fileCount":276,"integrity":"sha512-ZoxXci/UggBAiwG2YE7MevQuqumgxZB7PScevT42qT6TJkxxbqq4kKQPeqxTK/0jTpDP4TMG0x3FDf85INQ/bQ==","signatures":[{"sig":"MEUCIH4RSChzXclJn2+XeXxYH6lKOf+58M9loTKbiaVPNtGtAiEA7v6L6egd552ZRMRtpoRtFxDq0pOJTsAN82GHBhSw/4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3646998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7uCOCRA9TVsSAnZWagAAvTcP/0VjsC316HLuq2owoqmg\nCtELrk6xEESXiTrJQ5SPJEg7upWsRD+l+1jOpITBRh6vxU0wysRj0dYd8dHE\nt8nrnG3h9OJ410e/ZE99Q6GMu6EBLS0WXJ/i+FMks1hVzYWoH/mtlOLGEuKU\nxEzKB5GuhWM9i+da7OfuPKA9wfjC2XOqYmj3xT+HzCKOaCjf4tXmg7uxAgd+\nqfN7jborhG4IL/wOSmvzuK4bj39fSLbkYoifuMLND6ro9sr9tkNqDZNwWBuf\nR3WEEatHnXH+7yUJWt/1i69Rp6tskHiAY5XRtszc9xBxaaz5ZdbHVf3ttvuY\nvMlAhG+yPCohDLUBONYvR4nQUnXAuf8Y6ULHJrK28i4D2f4HREDlr20hgu1F\ng++3f+BZXWjyLXXOkbr9+m8eU7stYH+L43D5iFvx/zWnLARSFoVQ20Jtm+1u\nnRpU9833ibAVGJfvOH9sF+T6bLxdJcOhzO22U/wsqVHA6V8KCmMLZ7/YF2b3\nlL4+fXkM2+bpBOI7vIoGtzzdC4V192ObUw7kGUFT4RWX33CbrmNay91VOAsI\ngPW5pwqB6nfVg5DZpNgqYwK5F0y0kwPNUvCX6cWySeUjQHLCcAkXuxs2KMfF\nJX0k7gul0E9SDQUVW4KZpxNFruVEwgXS37bueSKXZchWL1AvsmzhmoF9Vs9z\nEgei\r\n=OUJb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | `true`    | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - | - | Attributes to pass to the checkbox element used in a row |\n| `rowKey`    | `key of T` | - | - | A field on a row that contains a unique identifier, can help speed up render performance and is required for the `onCheck` property |\n| `toBodyPrefix`    | <code>JSX.element &#124; JSX.Element</code> | - | - | JSX element(s) to display at the top of the table body |\n| `highlightedRows`    | <code>&ast;[]</code> | - | - | Highlights one or more rows. This property requires that you have provided a `rowKey` property: the row with a `rowKey` property that matches one of these values is highlighted. \n| `usePager`    | `boolean` | - | - | If true, a pager will be used when displaying items. \n| `itemsPerPage`    | `number` | `50` | - | The number of items to be shown per page. Only used if `usePager` is true. Defaults to `50`.\n| `pagerPosition`    | <code>'top' &#124; 'bottom' &#124; 'both'</code> | `top` | - | Sets wether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`.\n\n#### Programmatically selecting rows\n\nThe component has a `setRowSelection` method that can be accesssed via <a href='https://reactjs.org/docs/refs-and-the-dom.html' target='_blank' rel='noopener'>ref</a>.\n\nIt will accept an array of rows `T[]`, or an empty array in order to clear the selection.\n\nThis method requires that you have provided a `rowKey` property.\n\n### Terminal\n\nAn xterm emulator built on top of [xterm.js][1].\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Terminal.js)\n\n#### API\n\nThe `Terminal` component exposes a simple api, typically accessed via a `ref`.\n\nHere is a simple example that writes a number every second:\n\n```\nimport * as React from 'react'\nimport { Terminal } from 'rendition'\n\nexport class Logger extends React.Component {\n  constructor (props) {\n    super(props)\n\n    this.count = 0\n  }\n\n  componentDidMount () {\n    this.interval = setInterval(() => {\n        this.term.writeln(++this.count)\n      }\n    }, 1000)\n  }\n\n  render () {\n    return (\n      <Terminal \n        ref={term => (this.term = term)} \n      />\n    )\n  }\n}\n```\n\n##### `resize()`\n\nResize the `Terminal` component to fill its container.\n\n##### `clear()`\n\nClear all output from the terminal.\n\n##### `writeln(text)`\n\nWrite text to the terminal, followed by a line break.\n\n##### `write(text)`\n\nWrite text to the terminal.\n\n##### `destroy(text)`\n\nTear down the terminal instance.\n\n#### Remounting old instances\n\nIf you'd like to preserve a terminal session and remount it to the DOM at\na later point, you will need to set the `persistent` property to `true` and then access the readonly property `tty` and store it in memory. \nThe `persistent` flag prevents the `Terminal` component form destroying the\n`tty` instance when it unmounts.\nWhen you want to remount the session, instantiate a new `Terminal`\ncomponent and provide the `tty` value as the `ttyInstance` property. When\na `ttyInstance` property is provided, the `Terminal` component will use that\ninstance instead of creating a new one.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `ttyInstance`    | `object` | -         | -          | An existing `Terminal.tty` instance to use instead of creating a new one |\n| `persistent`    | `boolean` | -         | -          | If true, don't destroy the `Terminal.tty` instance when the component unmounts |\n| `nonInteractive`    | `boolean` | -         | -          | If true, the component will go into a \"read-only\" state, useful for displaying logs |\n| `color`    | `string` | -         | -          | A CSS color string that sets the background color of the terminal |\n| `config`    | `object` | -         | -          | Startup options to pass to the tty instance, see the [xterm.js options][2] for more detail |\n\n\n\n[1]: https://xtermjs.org/\n[2]: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L24\n\n### TextWithCopy\n\nDisplays text that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/TextWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `copy`      | `string` | -         | ✓          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | - | - | Optionally show the copy button on hover or always show the button\n\n### Textarea\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Textarea.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | `false` | - | If true, render text in a monospace font |\n| `autoRows`  | `boolean` | `false` | - | If true, the textarea `rows` property will be changed automatically based on the content of the textarea, this behaviour will only work with a [controlled input][2] (i.e. you have used the `onChange` property |\n| `minRows`  | `number` | - | - | Set the minimum number of rows |\n| `maxRows`  | `number` | - | - | Set the maximum number of rows |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the textarea value changes |\n\n#### Inheritance\n\nThe attributes of a [`<textarea>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n[2]: https://reactjs.org/docs/forms.html#controlled-components\n\n\n\n### Tooltips\n\nTooltips can be added to a supported component using the `tooltip` attribute.\nFor example, to add a tooltip to a `Button` component you would do the\nfollowing:\n\n```\n<Button\n  tooltip='I am a tooltip'\n>\n  Click me\n</Button>\n```\n\nIf the `tooltip` attribute is a string then a tooltip containing the strings\ncontent will be displayed above the component.\n\nIf you need more control over the tooltip, you can set the attribute to an\nobject with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| text         | `string`  | ✓ | The text to display in the tooltip |\n| trigger | <code>'click' &#124; 'hover'</code> | - | Controls whether the tooltip is displayed on hover or click, defaults to `'hover'`\n| placement | <code>'top' &#124; 'right' &#124; 'bottom' &#124; 'left'</code> | - | Controls the position of the tooltip related to the component, defaults to `'top'` |\n| containerStyle | `object` | - | Apply custom styles to the tooltip outer container, the object is applied as a [`style` attribute][1] |\n| innerStyle | `object` | - | Apply custom styles to the tooltip inner container, the object is applied as a [`style` attribute][1] |\n| arrowStyle | `object` | - | Apply custom styles to the tooltip arrow, the object is applied as a [`style` attribute][1] |\n\nThe following rendition components support the `tooltip` attribute:\n\n- `Alert`\n- `Badge`\n- `BadgeSelect`\n- `Box`\n- `Button`\n- `CodeWithCopy`\n- `DropDownButton`\n- `Fixed`\n- `Flex`\n- `Heading`\n- `Txt`\n- `Link`\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Tooltip.js)\n\n[1]: https://reactjs.org/docs/dom-elements.html#style\n\n### Txt\n\nDisplays a text block. A `<span>` tag can be used with `<Txt.span>` and a `<p>`\ntag can be used with `<Txt.p>`.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `bold`  | `boolean` | - | - | If true, render text in a bold font |\n| `caps`  | `boolean` | - | - | If true, render text in uppercase |\n| `align`  | `boolean` | - | - | Align text inside the component, one of 'left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent', 'inherit', 'initial', 'unset' |\n\n\n\n\n### Provider\n\nWrap your application in the `<Provider>` component so that child components can correctly inherit the default theme. You can optionally provide your own theme.\n\n### Styled system\n\nAll components support [styled-system][styled-system] attributes, allowing you to use a shorthand properties for styling components. The properties can have the properties in the form of `string | number | Array<string | number>`. If an array is provided, then a property is chosen based on the width of the screen. The screen width corresponds to a breakpoint set in the `theme` property of the `Provider` component, by default this is set to `[32, 48, 64, 80]` where each number is the screen width in ems.\n\n| Name          | Type              | Description                                  |\n| --------------|-------------------|--------------------------------------------- |\n|\tw             | `ResponsiveStyle` | sets the width\n|\tfontSize      | `ResponsiveStyle` | sets the font size\n|\tcolor         | `ResponsiveStyle` | sets the `color` css property\n|\tbg            | `ResponsiveStyle` | sets the `background` css property\n|\tm             | `ResponsiveStyle` | sets the `margin` css property\n|\tmt            | `ResponsiveStyle` | sets the `margin-top` css property\n|\tmr            | `ResponsiveStyle` | sets the `margin-right` css property\n|\tmb            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tml            | `ResponsiveStyle` | sets the `margin-bottom` css property\n|\tmx            | `ResponsiveStyle` | sets both the `margin-right` and `margin-left` css properties\n|\tmy            | `ResponsiveStyle` | sets both the `margin-top` and `margin-bottom` css properties\n|\tp             | `ResponsiveStyle` | sets the `padding` css property\n|\tpt            | `ResponsiveStyle` | sets the `padding-top` css property\n|\tpr            | `ResponsiveStyle` | sets the `padding-right` css property\n|\tpb            | `ResponsiveStyle` | sets the `padding-bottom` css property\n|\tpl            | `ResponsiveStyle` | sets the `padding-left` css property\n|\tpx            | `ResponsiveStyle` | sets both the `padding-right` and `padding-left` css properties\n|\tpy            | `ResponsiveStyle` | sets both the `padding-top` and `padding-bottom` css properties\n\n&ast;*`ResponsiveStyle` corresponds to a type of `string | number | Array<string | number>`*\n\n## Extra components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped separately under the `Extra` label. These components are not loaded by default \nas they rely on other large packages that you may not want to include in your \napplication.\nIf you would like to use them they can be loaded using by prefixing the\ncomponent name with `rendition/dist/extra/`. For example to load the `Markdown`\ncomponents you can use:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n## Unstable/Beta components\n\nSome components in the [storybook](https://balena-io-modules.github.io/rendition)\nare grouped seperately under the `Beta` label. These components are experimental and still\nunder development, as such their API may change without notice. They should not \nbe used in a production application.\nIf you would like to try them out they can be loaded using\n`import * from 'rendition/dist/unstable'`.\n\n## Upgrading\n\n[Upgrading from 3.x to 4.x](docs/migrating_3x-4x.md)\n\n## Contributing\n\nPlease read our [contribution guidelines](docs/CONTRIBUTING.md)\n\n[react]:https://reactjs.org/\n[recompose]:https://github.com/acdlite/recompose\n[styled-components]:https://www.styled-components.com/\n[styled-system]:http://jxnblk.com/styled-system/\n[husky]:https://github.com/typicode/husky\n","gitHead":"05114dbe8229e5969805c1e6c0888bed744fb16c","scripts":{"jest":"jest __tests__ --maxWorkers=4","lint":"npm run eslint && npm run tslint","test":"npm run lint && npm run jest","build":"rimraf dist && tsc && npm run build:docs","start":"start-storybook -p 6006","deploy":"npm run build:storybook && gh-pages -d .out","eslint":"eslint src __tests__","tslint":"tslint -t stylish \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prepack":"npm run build","prettify":"npm run prettify-js && npm run eslint-fix && npm run prettify-ts && npm run tslint-fix","precommit":"lint-staged","build:docs":"node ./scripts/generateDocs.js","eslint-fix":"eslint src __tests__ --fix","tslint-fix":"tslint -t stylish --fix \"src/**/*.ts\" \"src/**/*.tsx\" \"typings/**/*.d.ts\"","prettify-js":"prettier --config .prettierrc-js --write \"src/**/*.js\" \"test/**/*.js\"","prettify-ts":"prettier --config .prettierrc-ts --write \"src/**/*.ts\" \"src/**/*.tsx\" \"typings.d.ts\"","test:visual":"npm run ci:screenshot -- -o .reg/current && reg-cli .reg/current __screenshots__ .reg/diff -R .reg/report.html","ci:screenshot":"STORYBOOK_MODE=screenshot storybook-chrome-screenshot --browser-timeout 60000 -p 6006","build:storybook":"build-storybook -o .out","test:local-visual":"./scripts/test-screenshots.sh","generate-screenshots":"./scripts/generate-screenshots.sh"},"_npmUser":{"name":"balena.io","email":"accounts+npm@balena.io"},"repository":{"url":"git+https://github.com/resin-io-modules/rendition.git","type":"git"},"_npmVersion":"6.1.0","description":"React components library","directories":{},"lint-staged":{"*.{ts,tsx}":["prettier --config .prettierrc-ts --write","tslint --fix","git add"],"{src, test}/**/*.js":["prettier --config .prettierrc-js --write","eslint --fix","git add"]},"_nodeVersion":"10.4.0","dependencies":{"ajv":"^6.2.0","uuid":"^3.2.1","color":"^2.0.0","xterm":"^3.2.0","lodash":"^4.17.4","marked":"^0.4.0","moment":"^2.20.1","mermaid":"^8.0.0-rc.8","tag-hoc":"1.0.0","chart.js":"^2.7.2","showdown":"^1.7.3","recompose":"0.26.0","babel-core":"^6.26.0","color-hash":"^1.0.3","@types/uuid":"^3.4.3","grid-styled":"3.1.1","react-icons":"^2.2.5","@types/color":"^2.0.0","@types/react":"^16.0.38","ajv-keywords":"^3.1.0","regex-parser":"^2.2.7","resin-semver":"^1.4.0","@types/lodash":"^4.14.77","@types/marked":"^0.3.0","styled-system":"^1.0.5","@types/chart.js":"^2.7.14","@types/react-dom":"^16.0.4","@types/recompose":"^0.26.2","@types/prop-types":"^15.5.2","copy-to-clipboard":"^3.0.8","styled-components":"^3.2.3","@types/grid-styled":"^3.2.0","@types/json-schema":"^6.0.1","@types/react-icons":"^2.2.4","resin-device-status":"^1.1.1","react-jsonschema-form":"^1.0.0","@types/react-jsonschema-form":"^1.0.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^23.6.0","husky":"^0.14.3","jsdom":"^11.6.2","react":"^16.2.0","sinon":"^4.5.0","enzyme":"^3.3.0","eslint":"^4.13.1","rimraf":"^2.6.2","tslint":"^5.9.1","reg-cli":"^0.13.0-beta.1","ts-jest":"^23.10.1","ts-node":"^3.3.0","gh-pages":"2.0.0","prettier":"^1.12.1","react-dom":"^16.2.0","ts-loader":"^3.0.2","css-loader":"^0.28.5","typescript":"^2.6.2","@types/jest":"^23.3.2","lint-staged":"^4.1.1","git-url-parse":"^7.0.0","@storybook/react":"^3.3.13","jest-canvas-mock":"^1.1.0","match-media-mock":"^0.1.0","storybook-readme":"^3.3.0","eslint-plugin-node":"^5.2.0","babel-preset-es2015":"^6.24.0","eslint-plugin-react":"^7.4.0","react-test-renderer":"^16.2.0","babel-preset-stage-3":"^6.24.1","eslint-plugin-import":"^2.7.0","eslint-plugin-promise":"^3.6.0","eslint-config-standard":"^10.2.1","eslint-plugin-standard":"^3.0.1","enzyme-adapter-react-16":"^1.1.1","@storybook/addon-actions":"^3.4.10","storybook-chrome-screenshot":"^1.3.0","eslint-config-standard-react":"^5.0.0","babel-plugin-transform-react-jsx":"^6.23.0"},"_npmOperationalInternal":{"tmp":"tmp/rendition_4.33.0-326-set-progressbar-default-type-05114dbe8229e5969805c1e6c0888bed744fb16c_1542381709328_0.2689514124219303","host":"s3://npm-registry-packages"},"deprecated":"Deprecated: no longer maintained. The GitHub repository has been archived and no further releases will be published."},"4.33.0-625-table-horizontal-scroll-issue-dcd441f8d68dc568be16df8c7ef2cb805e58217f":{"name":"rendition","version":"4.33.0-625-table-horizontal-scroll-issue-dcd441f8d68dc568be16df8c7ef2cb805e58217f","license":"Apache-2.0","_id":"rendition@4.33.0-625-table-horizontal-scroll-issue-dcd441f8d68dc568be16df8c7ef2cb805e58217f","maintainers":[{"name":"balena.io","email":"accounts+npm@balena.io"},{"name":"resin-ci","email":"accounts+npm-ci@resin.io"},{"name":"resin.io","email":"accounts@resin.io"}],"homepage":"https://github.com/resin-io-modules/rendition#readme","bugs":{"url":"https://github.com/resin-io-modules/rendition/issues"},"dist":{"shasum":"0c2f0bfe7585dd8c97a5b24e54948a09476cf170","tarball":"https://registry.npmjs.org/rendition/-/rendition-4.33.0-625-table-horizontal-scroll-issue-dcd441f8d68dc568be16df8c7ef2cb805e58217f.tgz","fileCount":276,"integrity":"sha512-f5eAJJguh5IcfYtJn/vq0AQV0dck/3xWbTeOuvy+y1w8AEuMOHtUZtCMfY+2yKnzs11tROXw096OTrnzGNFFxg==","signatures":[{"sig":"MEUCIQCG8g1OfMWwpn/+fy+0cd6wwhp2Z5vEnKBU6pgHMYrS0AIgB/Gw8tbdoL1mlkTJsgi9NAJ1wrlrNTsVyu7Dbf+dzOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3647325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7woeCRA9TVsSAnZWagAAi4oP/1R6ccc+TMZmgeRHEmJB\nKc7rHpEuoYDKC/ia45C/iMCTwMXPEieG0u3Whd2VXOHAm42kl27p9drm4/47\nrsqchMgWF8F+9oa9zBJojD5pqYacEF0P7ZSb6VQt69Rp9Mzx6Gb2JyNw3rTZ\n3wTTOAc2MIx3TdjAJIRtl1NSBgSjNySSlmPGSHNh89161DRe6hak4AWx8wtT\nFuSpuG35LJz1PZ3HbFM5qEQb8/rY5KYKVk3AETkwnRf1S4/pEjlIuOvv6Ls7\nnFfpg557LMcYjKBTd8hk752zLpFnl8EB6UvRs4tqFm0+JP2zRYAba2cSlAfB\nR48ZdB5rRaaILeg/UKqfIfYcHnE3UUZtdKw2iZm11uhBcuzGxbAwDzfmdjeu\nO+2JfIKAZ8hUQm3uvpZQXs7vjX84Q4/qMD5flYW89NQZSN4ExVa+f1PIYAHv\nzbvWnFQ6LCKniv/+/v76kPjHCKcJDTlvkm8v6n5hH6hp6DlCfLB/h8qIg8rR\nkLtTBzhp48CexOTgW49enNCmtb5FL+T4q9ydt2Sz1y8MAWaHpM4lyZf0U1ee\nszRj6HYzNH/qApBpRSzw+MFELDrXw6wAlAhrPZnkb8o7lNx7VPNuXS3dI+7F\nWk6tF3EUMyFEjv2krjohku4aTh5YD3wWKyVhfMJKwWzJOfUSh6Nin0bg6vmx\nKg1C\r\n=PH1C\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"globals":{"ts-jest":{"skipBabel":true}},"verbose":true,"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","transform":{"^.+\\.js$":"babel-jest","^.+\\.tsx?$":"ts-jest"},"setupFiles":["jest-canvas-mock"],"collectCoverage":true,"moduleDirectories":["node_modules","src"],"moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"setupTestFrameworkScriptFile":"<rootDir>scripts/setupTests.js"},"main":"./dist/index.js","types":"./typings/rendition.d.ts","readme":"# Rendition\n\n[![npm version](https://badge.fury.io/js/rendition.svg)](http://badge.fury.io/js/rendition)\n[![Build Status](https://travis-ci.org/balena-io-modules/rendition.svg?branch=master)](https://travis-ci.org/balena-io-modules/rendition)\n[![Dependency Status](https://img.shields.io/david/balena-io-modules/rendition.svg)](https://david-dm.org/balena-io-modules/rendition)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\nA library of UI components, built using [React][react], [recompose][recompose], [styled-components][styled-components] and [styled-system][styled-system].\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Components](#components)\n* [Development](#development)\n* [Testing](#testing)\n* [Upgrading](#testing)\n\n## Installation\n\n```\nnpm install --save rendition\n```\n\n## Usage\n\nWrap your application in the `Provider` component and start using components!\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { Button, Box, Provider } from 'rendition';\n\nReactDOM.render(\n  <Provider>\n    <Box my={3} mx={['auto', 15]}>\n      <Button primary emphasized>Click me</Button>\n    </Box>\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Components\n\nFor an interactive demo of all components, see https://balena-io-modules.github.io/rendition\n\n- [Alert](#alert)\n- [ArcSlider](#arcslider)\n- [Badge](#badge)\n- [BadgeSelect](#badgeselect)\n- [Banner](#banner)\n- [Box](#box)\n- [Button](#button)\n- [ButtonGroup](#buttongroup)\n- [CodeWithCopy](#codewithcopy)\n- [Container](#container)\n- [Divider](#divider)\n- [DropDownButton](#dropdownbutton)\n- [Filters](#filters)\n- [Fixed](#fixed)\n- [Flex](#flex)\n- [Form](#form)\n- [Gauge](#gauge)\n- [Heading](#heading)\n- [Img](#img)\n- [Input](#input)\n- [Link](#link)\n- [Markdown](#markdown)\n- [Mermaid](#mermaid)\n- [Modal](#modal)\n- [NavBar](#navbar)\n- [Pager](#pager)\n- [Pill](#pill)\n- [ProgressBar](#progressbar)\n- [Search](#search)\n- [Select](#select)\n- [Swatches](#swatches)\n- [Table](#table)\n- [Terminal](#terminal)\n- [TextWithCopy](#textwithcopy)\n- [Textarea](#textarea)\n- [Tooltip](#tooltip)\n- [Txt](#txt)\n\n### Alert\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Alert.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `emphasized`  | `boolean` | - | - | If true, use the use bolder colors and a larger size |\n| `plaintText` | `boolean` | - | - | If true, the alert will be rendered without a border or a background |\n| `prefix` | <code>JSX.Element &#124; string &#124; false</code> | - | - | Set a prefix on the alert message, if this prop is set to false, the default prefix will not be shown |\n| `onDismiss` | `() => void` | - | - | A function that is called when dismissing an alert\n\n### ArcSlider\n\nA slider input that is displayed as an arc. This component will scale in size to\nfit it's container. A label can be added by placing a child element inside this\ncomponent.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ArcSlider.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `onValueChange`    | `(value: number) => void` | - | - | A function that is called when the slider value changes, this will always be a value between 0 and 1 |\n| `value`       | `number`  | -         | -          | A number between 0 and 1 that represents the progress         |\n| `fillColor`   | `string`  | -         | -          | A CSS color string to use for the color of the \"filled\" part of the arc |\n| `background`  | `string`  | -         | -          | A CSS color string to use for the color of the arc track      |\n\n#### Inheritance\n\nThe properties of the [`Box`][1] component are also available.\n\n[1]: /?selectedKind=Box\n\n### Badge\n\nBy default the background color of a `Badge` component is generated\nautomatically from its `text` property, though this can be overridden.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Badge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | - | - | If true, use the `primary` theme color     |\n| `secondary`   | `boolean` | - | - | If true, use the `secondary` theme color   |\n| `tertiary`    | `boolean` | - | - | If true, use the `tertiary` theme color    |\n| `quarternary` | `boolean` | - | - | If true, use the `quarternary` theme color |\n| `danger`      | `boolean` | - | - | If true, use the `danger` theme color      |\n| `warning`     | `boolean` | - | - | If true, use the `warning` theme color     |\n| `success`     | `boolean` | - | - | If true, use the `success` theme color     |\n| `info`        | `boolean` | - | - | If true, use the `info` theme color        |\n| `text`  | `string` | - | ✓ | The text to display inside the badge |\n| `small`  | `boolean` | - | - | If true, reduce the scale of the badge |\n\n### BadgeSelect\n\nDisplays a dropdown list, with each item displayed as a `Badge` component.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/BadgeSelect.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `items`  | `string[]` | - | ✓ | An array of strings that should be rendered as `Badge`components |\n| `extraPrefix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, before the main items |\n| `extraSuffix`  | `string[]` | - | - | An array of strings that should be rendered in plaintext, after the main items |\n| `onItemChange`  | `(value: string) => void` | - | - | A function that is called when an item is selected |\n| `defaultSelected`| `string`| - | - | The item that should be selected by default |\n| `placeholder`| `string`| - | - | The text to display if no item is selected by default |\n\nAny other properties supplied are spread to the root element ([`DropDownButton`][1]).\n\n#### Inheritance\n\nThe properties of the [`DropDownButton`][1] component are also available.\n\n[1]: /?selectedKind=DropDownButton\n\n### Banner\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Banner.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `backgroundImage`| `string`| - | - | The path to an image that should be displayed in the background |\n| `minHeight`| `string`| - | - | The minimum height of the `Banner`, eg `180px` |\n\n\n### Box\n\nDisplays a block level element.\n\nThe basic building block of a rendition application.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Box.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `flex`      | <code>string &#124; string[]</code> | - | - | Sets `flex`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `order`      | <code>number &#124; string &#124; Array&lt;number &#124; string&gt;</code> | - | - | Sets `order`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n\n\n### Button\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Button.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `outline`      | `boolean` | -         | -          | If true, the button will have a transparent background, and the border and text color will match |\n| `plaintext`      | `boolean` | -         | -          | If true, render the button without padding, background or border |\n| `underline`      | `boolean` | -         | -          | Similar to the `plaintext` prop, but displays a line underneath the button text |\n| `iconElement`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be rendered before the text inside the button |\n\n\n### ButtonGroup\n\nWrapper for buttons to make them stick together.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ButtonGroup.js)\n### CodeWithCopy\n\nDisplays text formatted as `<code>` that can be copied to the clipboard.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/CodeWithCopy.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `text`      | `string` | -         | ✓          | The value that should be displayed, if the `copy` prop is not provided, this value will be copied to the clipboard\n| `copy`      | `string` | -         | -          | The value that should be copied to the clipboard\n| `showCopyButton`      | <code>'hover' &#124; 'always'</code> | <code>'always'</code>       | -          | Optionally show the copy button on hover or always show the button\n\n### Container\n\nA padded container with a responsive width.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Container.js)\n\n\n### Divider\n\nA styled horizontal rule.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Divider.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| -------|--------|-----------|------------|-------------- |\n| `height`  | `number` | `2` | - | The height of the divider |\n| `background-color`  | `string` | `#333` | - | The color of the divider |\n\n### DropDownButton\n\nDisplays a button with an attached dropdown list, `children` of the component\nare rendered inside a dropdown list.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/DropDownButton.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color               |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color             |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color              |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color           |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color               |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color               |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                  |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `square`      | `boolean` | -         | -          | If true, render the button with equal length width and height |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the button |\n| `label`      | `JSX.Element` | -         | -          | Optionally provide a JSX element that will be displayed inside the main button |\n| `border`      | `boolean` | -         | -          | If true, place a border between each item in the dropdown |\n| `joined`      | `boolean` | -         | -          | If true, render the component as a single button instead of two |\n| `noListFormat`      | `boolean` | -         | -          | If true, render\nchildren as a single JSX element instead of iterating over each of them |\n\n\n### Filters\n\nA component that can be used for generating filters in the form of [json schema](http://json-schema.org/) objects and saving sets of filters as \"views\".\nThe filters created by this component can be used to filter a collection of\nobjects using the `SchemaSieve` object.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Filters.js)\n\n#### Schema\n\nThe `Filters` component requires a `schema` property which should be a json\nschema that defines the shape of the objects you want to filter. For example if\nyou want to filter on a collection that looks like this:\n\n```\n[\n  {\n    name: 'Bulbasaur',\n    caught: true,\n  },\n  {\n    name: 'Pikachu',\n    caught: true,\n  },\n  {\n    name: 'Dratini',\n    caught: false,\n  }\n]\n```\n\nYou would define a schema that looks like this:\n\n```\n{\n  type: 'object',\n  properties: {\n    name: {\n      title: 'Name',\n      type: 'string'\n    },\n    caught: {\n      title: 'Has been caught',\n      type: 'boolean'\n    }\n  }\n}\n```\n\nIf you provide a `title` property, it will be used to label the field when\nfiltering, otherwise the field name will be used.\n\n##### Views\n\nViews represent a set of filters, along with an id and a name. This is a useful\nfeature for storing a set filters and loading it again at a later point.\nA view can optionally have a `scope` property, which will correspond to the\n`slug` of a view scope, if you have provided one in the `Filters` property\n`viewScopes` property. Scopes allow you to easily add an extra layer of\ngranularity/grouping to views that are generated. If you provide view scopes,\nthe user can select a scope when creating a new view.\n\nA view scope has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| slug            | `string`  | A unique identifier for the scope                  |\n| name          | `string`  | A descriptive name for the scope                     |\n| label       | `string`  | An optional label to use for this scope when creating a view  |\n\nA view has the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| id            | `string`  | A unique identifier for the view                     |\n| name          | `string`  | A descriptive name for the view                      |\n| filters       | `string`  | An array of json schemas                             |\n| scope       | <code>string &#124; null</code>  | The slug of a view scope, or `null` if now scopes are provided |\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the objects you want to filter |\n| `disabled`    | `boolean` | -         | -          | If true, disable the entire `Filters` interface\n| `filters`    | `object[]` | -         | -          | An array of json schemas to be displayed as the currently selected filters, typically used when loading when loading filters from storage |\n| `views`    | `object[]` | -         | -          | An array of views, as described above, typically used when loading when loading views from storage |\n| `viewScopes`    | `object[]` | - | - | An array of view scopes, as described above |\n| `onFiltersUpdate`    | `(filters: object[]) => void` | - | - | A function that is called when filters are updated |\n| `onViewsUpdate`    | `(views: object[]) => void` | - | - | A function that is called when views are updated |\n| `addFilterButtonProps` | `object` | - | - | Properties that are passed to the \"Add filter\" button, these are the same props used for the [`Button`][1] component |\n| `viewsMenuButtonProps` | `object` | - | - | Properties that are passed to the \"Views\" button, these are the same props used for the [`DropDownButton`][2] component |\n| `renderMode` | <code>string &#124; string[]</code> | - | - | Controls which parts of the `Filters` interface are displayed. One of `all`, `add`, `search`, `views`, `summary`, or an array containing any of these values |\n| `dark`    | `boolean` | -         | -          | If true, Set the `Filters` component against a dark background |\n\n[1]: /?selectedKind=Button\n[2]: /?selectedKind=DropDownButton\n\n\n\n\n### Fixed\n\nDisplays an element with a [`fixed`][1] position.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Fixed.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `top`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the top of the containing block. If true, sets the value to zero\n| `right`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the right of the containing block. If true, sets the value to zero\n| `bottom`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the bottom of the containing block. If true, sets the value to zero\n| `left`      | <code>boolean &#124; ResponsiveStyle</code> | - | - | Sets the distance to the left of the containing block. If true, sets the value to zero\n| `z`      | `ResponsiveStyle` | - | - | Sets the z-index of the component |\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed\n\n### Flex\n\nDisplays an element using [flexbox](1).\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Flex.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `align`      | <code>string &#124; string[]</code> | - | - | Sets `align-items`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `justify`      | <code>string &#124; string[]</code> | - | - | Sets `justify-content`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `flexDirection`      | <code>string &#124; string[]</code> | - | - | Sets `flex-direction`, if the value is an array, sets a responsive style corresponding to the theme's breakpoints\n| `wrap`      | <code>string &#124; string[]</code> | - | - | Sets `flex-wrap: wrap`\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\n\n### Form\n\nA component that can be used for generating a form from a [json schema](http://json-schema.org/) object. \nThe standard json schema types are supported, as well as the `date-time` format.\n\nUnder the hood, this component uses [`react-jsonschema-form`][2] and support\nall [`uiSchema`][3] options from that project.\n\nAdditional formats are supported, but require supporting widgets to be loaded.\nFor example if you would like to support the [mermaid][1] format, you'll need to\nimport the widget using `import 'renditon/dist/extra/Form/mermaid'`.\nThis import only needs to happen once, so it is recommended that its done at the\nroot level of your application.\n\nThis component is experimental and still under development, if you would like to\nuse it, it can be imported using `import { Form } from 'rendition/dist/unstable'`.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `schema`    | `object` | - | ✓ | A json schema describing the shape of the data you would like to gather |\n| `submitButtonText` | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to replace the text in the form submit button |\n| `hideSubmitButton` | `boolean` | - | - | If true, do not display the form submit button |\n| `submitButtonProps` | `object` | - | - | Properties that are passed to the submit button, these are the same props used for the [`Button`][4] component |\n| `value` | `*` | - | - | The data that should be displayed in the form |\n| `onFormChange` | `(result: object) => void` | - | - | A function that is called when form data changes |\n| `onFormSubmit` | `(result: object) => void` | - | - | A function that is called when the form is submitted |\n| `uiSchema` | `object` | - | - | A configuration object used to change the styling and layout of the form. See the [`react-jsonschema-form`][3] docs for more details |\n\n\n[1]: https://mermaidjs.github.io/\n[2]: https://github.com/mozilla-services/react-jsonschema-form\n[3]: https://github.com/mozilla-services/react-jsonschema-form#the-uischema-object\n[4]: /?selectedKind=Button\n\n### Gauge\n\nGenerate a \"gauge\" shaped chart with a color coded legend.\nGauges are generated using an array of data, where each item represents\na segment of the gauge. Each item should have the following properties:\n\n| Name          | Type      | Description                                          |\n| ------------- | --------- | ---------------------------------------------------- |\n| value         | `number`  | A numerical value for this segment                   |\n| name          | `string`  | A descriptive name for this segment                  |\n| color         | `string`  | A CSS color string to use for this segment           |\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Gauge.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `title`  | `string` | - | ✓ | Text displayed in the center of the gauge |\n| `data`  | `object[]` | - | ✓ | An array of data as described above |\n| `placeholderColor`  | `string` | - | - | A CSS color string to use as the gauge background |\n\n\n### Heading\n\nA component that displays a heading. By default an `<h3>` tag is used. The exact\nheading type can be specifed by appending the element name to the component, for\nexample `<Heading.h1>`, `<Heading.h2>`, `<Heading.h3>` etc.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n### Img\n\nDisplays an image.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Img.js)\n\n#### Inheritance\n\nThe attributes of an [`<img>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n\n### Input\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Input.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `monospace`  | `boolean` | - | - | If true, render text in a monospace font |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the input value changes |\n\n#### Inheritance\n\nThe attributes of an [`<input>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input\n\n\n\n### Link\n\nDisplays an anchor link.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Typography.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `blank`  | `boolean` | - | - | If true, open the link in a new tab |\n| `disabled`  | `boolean` | - | - | If true, disable the link |\n\n#### Inheritance\n\nThe attributes of an [`<a>`][1] element are also available.\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n\n\n### Markdown\n\nA simple component for rendering [GitHub flavored markdown][1]. This component\nsanitizes input.\nThis component is not loaded by default as it relies on a markdown parsing package \nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Markdown } from 'rendition/dist/extra/Markdown';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Markdown.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `children`  | `string` | - | ✓ | The markdown source that should be rendered |\n\nAny other properties supplied are spread to the root element ([`Txt`][2]).\n\n#### Inheritance\n\nThe properties of the [`Txt`][2] component are also available.\n\n[1]: https://github.github.com/gfm/\n[2]: /?selectedKind=Txt\n\n### Mermaid\n\nGenerate charts from text using [mermaidjs](https://mermaidjs.github.io/).\nThis component is not loaded by default as it relies on the mermaidjs library\nthat you may not want to include in your application.\nYou can load this component using:\n\n```\nimport { Mermaid } from 'rendition/dist/extra/Mermaid';\n```\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Mermaid.js)\n\n#### Props\n\n| Name   | Type   | Default   | Required   | Description   |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `value`  | `string` | - | ✓ | The mermaid source that should be rendered |\n\n\n### Modal\n\nDisplays a centrally position modal overlay. Children passed to this component\nare rendered inside the modal.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Modal.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| --------------|-----------|-----------|------------|----------------------------------------------------- |\n| `title`       | `string`\n | - | - | A title to display at the top of the Modal, only displayed if the `titleElement` property is not used |\n| `titleElement`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display at the top of the modal |\n| `titleDetails`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display underneath the modal's `title`, only displayed if the `titleElement` property is not used and a `title` property is provided |\n| `action`    | <code>string &#124; JSX.Element</code> | - | - | A string or JSX element to display in the primary modal button, defaults to 'OK' |\n| `cancel`    | `() => any` | - | - | A function that is called if the modal is dismissed |\n| `done`    | `() => any` | - | ✓ | A function that is called if the primary modal button is clicked |\n| `primaryButtonProps` | `object` | - | - | Properties that are passed to the primary button, these are the same props used for the [`Button`][1] component |\n| `secondaryButtonProps` | `object` | - | - | If provided, will cause a secondary button to appear on the modal. These properties that are passed to that button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| `cancelButtonProps` | `object` | - | - | Properties that are passed to the cancel button, these are the same props used for the [`Button`][1] component |\n| style | `object` | - | - |  Apply custom styles to Modal, the object is applied as a [`style` attribute][2] |\n| containerStyle | `object` | - | - | Apply custom styles to the container of the Modal, the object is applied as a [`style` attribute][2] |\n\n[1]: /?selectedKind=Button\n[2]: https://reactjs.org/docs/dom-elements.html#style\n\n### NavBar\n\nA component used to render a navigation bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/NavBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `brand`    | `JSX.Element` | - | ✓ | A JSX element used as the main branding in the navbar |\n\n### Pager\n\nDisplays a pager widget.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pager.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `totalItems`  | `number`  | -         | -          | The total number of items to split into pages        |\n| `itemsPerPage`| `number`  | -         | -          | The number of items on each page                     |\n| `page`        | `number`  | -         | -          | The current page (zero-indexed)                      |\n| `nextPage`    | `() => void` | -         | -          | Callback invoked when the \"next page\" button is clicked\n| `prevPage`    | `() => void` | -         | -          | Callback invoked when the \"previous page\" button is clicked\n\n### Pill\n\nDisplays a text block with rounded corners.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Pill.tsx)\n\n#### Props\n\n| Name          | Type                        | Default   | Required   | Description                                      |\n| --------------|-----------------------------|-----------|------------|------------------------------------------------- |\n| `primary`     | `boolean`                   | -         | -          | If true, use the `primary` theme color           |\n| `secondary`   | `boolean`                   | -         | -          | If true, use the `secondary` theme color         |\n| `tertiary`    | `boolean`                   | -         | -          | If true, use the `tertiary` theme color          |\n| `quarternary` | `boolean`                   | -         | -          | If true, use the `quarternary` theme color       |\n| `danger`      | `boolean`                   | -         | -          | If true, use the `danger` theme color            |\n| `warning`     | `boolean`                   | -         | -          | If true, use the `warning` theme color           |\n| `success`     | `boolean`                   | -         | -          | If true, use the `success` theme color           |\n| `info`        | `boolean`                   | -         | -          | If true, use the `info` theme color              |\n| `shade`       | `main` or `light` or `dark` | -         | -          | Can be set to use a variation of the theme color |\n| `small`       | `boolean`                   | -         | -          | Scales down the badge                            |\n\n### ProgressBar\n\nDisplays a progress bar using a value representing a percentage.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/ProgressBar.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                                   |\n| --------------|-----------|-----------|------------|-------------------------------------------------------------- |\n| `primary`     | `boolean` | -         | -          | If true, use the `primary` theme color                        |\n| `secondary`   | `boolean` | -         | -          | If true, use the `secondary` theme color                      |\n| `tertiary`    | `boolean` | -         | -          | If true, use the `tertiary` theme color                       |\n| `quarternary` | `boolean` | -         | -          | If true, use the `quarternary` theme color                    |\n| `danger`      | `boolean` | -         | -          | If true, use the `danger` theme color                         |\n| `warning`     | `boolean` | -         | -          | If true, use the `warning` theme color                        |\n| `success`     | `boolean` | -         | -          | If true, use the `success` theme color                        |\n| `info`        | `boolean` | -         | -          | If true, use the `info` theme color                           |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                                    |\n| `value`       | `number`  | -         | ✓          | A value between 1 and 100 that represents the progress        |\n|  background   | `string`  | -         | -          | A CSS color string to use for the progress bar                |\n|  color        | `string`  | -         | -          | A CSS color string to use for the content of the progress bar |\n\n### Search\n\nDisplays an input styled as a search bar.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Search.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `dark`    | `boolean` | - | - | If true, uses a light colorscheme for use on a dark background |\n| `disabled`    | `boolean` | -         | -          | If true, disable the input |\n| `placeholder`    | `string` | -         | -          | A placeholder to use in the input |\n| `value`    | `string` | -         | ✓          | The value of the input |\n| `onChange`    | `(event: Event) => void` | -         | ✓          | A function that is called when the input changes |\n\n### Select\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Select.js)\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------ | ------ | --------- | ---------- | ------------- |\n| `emphasized`  | `boolean` | -         | -          | If true, use a larger size                           |\n| `value`  | `string` | - | - | The selected value |\n| `disabled`      | `boolean` | -         | -          | If true, disabled the element |\n| `onChange`  | `(e: Event) => void` | - | - | A function that is called when the value changes |\n\n\n### Swatches\n\nThis story displays the colors available in the `Theme` object exported from\n`rendtion`. The values are also available to all styled components used within\nthe `Provider` component. See the [styled components documentation][1] for more\ninformation\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Swatches.js)\n\n[1]: https://www.styled-components.com/docs/advanced#theming\n\n### Table\n\nA component used to generate a styled table.\n\n[View story source](https://github.com/balena-io-modules/rendition/blob/master/src/stories/Table.js)\n\n#### Columns\n\nThe `columns` property defines what columns the table should display, how they\nare rendered and whether or not the column is sortable.\n\nThe `columns` property should be an array of objects with the following properties:\n\n| Name          | Type      | Required | Description                                          |\n| ------------- | --------- | -------- | ---------------------------------------------------- |\n| field         | `keyof T`  | ✓ | The name of the field this column should render, this should correspond to a key on the objects passed to the `data` property of the `Table` component |\n| cellAttributes | <code>object &#124; (value: any, row: T) => object</code> | - | Attributes that are passed to each cell in this column. This can also be a function, which will be called with the value of the `field` provided and the row data (`T`) |\n| label | <code>string &#124; JSX.Element</code> | - | A string or JSX element that will be used to display the name of the column. If this property is not provided, the `field` property will be used instead |\n| render | <code>(value: any, row: T) => string &#124; number &#124; number &#124; JSX.Element &#124; null</code> | - | Use a custom render function to display the value in each column cell. This function will be called with the value of the `field` provided and the row data (`T`) |\n| sortable | <code>boolean &#124; (a: T, b: T) => number</code> | - | If true, the column will be sortable using an alphanumeric sort, alternatively a function can be provided allowing finer grained control over sorting |\n\n#### Notes\n\nFor performance reasons table rows are only re-rendered if the row properties\nhave changed. For this reason, rows **will not** re-render if their properties\nare mutated: you should clone the item instead, for example:\n\n```js\nupdate (index) {\n  const newData = this.state.data\n  const element = newData[index]\n  newData[index] = Object.assign({}, element, { active: !element.active })\n  this.setState({ data: newData })\n}\n```\n\nSee the **Updating data in a table** story for an example of how this can be\ndone using a high order component.\n\nAdditionally, because of this rendering behaviour the `render()` functions in\nthe `Table` component's `columns` property should only use values provided to \nthe render function.\nWhen `render()` functions are provided, they must act like pure functions with \nrespect to their props. They should only rely on their arguments to generate \ntheir output and not use any context variables. If you are using a context \nvariable in your `render()` function, then changes to that variable will not \ncause a re-render of the component and will not be reflected on the table.\n\n#### Props\n\n| Name          | Type      | Default   | Required   | Description                                          |\n| ------------- | --------- | --------- | ---------- | ---------------------------------------------------- |\n| `columns`    | `object[]` | - | ✓ | An array of column objects, as described above |\n| `data`    | `T[]` | - | ✓ | An array of objects that will be displayed in the table |\n| `getRowHref`    | `(row: T) => string` | - | - | If provided, each row in the table will be a clickable link, this function is used to create the link href |\n| `onCheck`    | `(checkedItems: T[]) => string` | - | - | If provided, each row will begin with a checkbox. This function is called with every checked row every time a checkbox is toggled on or off. This property requires that you have provided a `rowKey` property |\n| `onRowClick`    | `(row: T, event: Event) => void` | - | - | A function that is called when a row is clicked. This property requires that you have provided a `rowKey` property |\n| `rowAnchorAttributes`    | `object` | - | - | Attributes to pass to the anchor element used in a row |\n| `rowCheckboxAttributes`    | `object` | - |