{"_id":"classy-ui","_rev":"55-ed8124c585a7d23b04660c9df146419f","name":"classy-ui","dist-tags":{"alpha":"2.1.0","latest":"10.0.4","beta":"11.0.7"},"versions":{"1.0.0":{"name":"classy-ui","version":"1.0.0","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"gitHead":"3647e767acd0aa120430bf0b7db37fdecf9fb0a3","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-hBsZOp/VMZ/aGDSxox7OlFwU3JNx6sqPgc2boDviZPKIDNVCVJ3wzBSO5MZHzKWx0l6UOHkRBGCBoqfTTWIaBg==","shasum":"8d61b8f8daed19fd41a57af772ef67424ad33aeb","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.0.0.tgz","fileCount":73,"unpackedSize":276647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMzVDCRA9TVsSAnZWagAA3tcP/R3d5XgxZ2gGNl2eppXl\n3qsH5S2vxnuFpWwbejOTYmjY3ZLNu14i4EZXoCgonLi7+FvkUHTtaq+umPqE\ng/+eKyjA5yGc+HAFhE6fSJYUEgncJeW2I1AE+mSOUNdWtOCDYs6q08f5Fumz\nq99/rn3Ue5e9XlUM2nI/Hw30DRSgVmTGDFUMRTUeS5ypQXfso0XE4wN8VfDS\n+rSw8+KAQnI072dMHq/nts+jAIAhC/ZfYXP+JpiZ1zuEfiCjetDsfrtvFKQF\nV8tv0BhsTQjmGLWwpuru6gBn49++Vzk1s0kJh7a9rB9vNf4ZaJJ0mFSVCZaI\nF5V/R3bw1kEoqDiEaDMhy27V1/M7NunfKlwyMH7HhHYmlmzVio4DG1VbQlta\n5TWLyRS1B+Nd9iBsAOQJZFSbvIyKxtReK9u1QeLTlkWyzfb6KzL0TWIU9vqP\nZjABODHFV1ihAUQoKxibz1an7FgZaLifJ02QrH5a7/NQlkeNL94RsPxtcPAB\nfVLD/R8//hP0YNLo0eaHvGAAenph1JTgnVLZ0dMZCOS2flZAK/vz6bdobqre\nZ3Jf5PuDL6N9ta1MkAXIs0lwEkQMwgwbdorSgTw+fRAx0a5tw9zvKxhy32Ef\nXcPXDz90eEPLQh5QnmblbrU2mleODz1SEqAt2RXLkG4rq+lK3GDI6Hh6OkFv\neQjA\r\n=8eV/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTZJp/vFX57acMwJ2KJ6cZtyMqQrj6MZoNmwtZFtH8sAIgfpX7kXNUuNvuLO5H2qydwaR/OCeLAWMMPMIfg2Mvdm4="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.0.0_1580414274576_0.7364964039784558"},"_hasShrinkwrap":false},"1.0.1":{"name":"classy-ui","version":"1.0.1","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\nWith great inspiration from [tailwindcss](https://tailwindcss.com/) we wanted to take it a step further. **classy-ui**, like tailwindcss, lets you express your styling with CSS classes based on a design system that you can customize. Where **classy-ui** takes it further is that it automatically creates the output CSS based on your actual application consumption of these css classes... and yeah, it is typed, meaning you can search for the classes directly in your code even if you are **NOT** using Typescript.\n\nThe benefits:\n\n- Typed usage of classnames from the design system which also gives you discoverability, traversing and searching for classnames\n- Lazily creates classnames and pseudo selector CSS based on consumption in app\n- Compose classnames together into variables or use them inline in components\n- Use dynamic assignment of classnames with conveniant `{ 'my-class': isActive }`\n- In production it automatically optimizes css class names and dynamic assignment. The created css file is automatically imported in your code, making it part of your existing CSS optimization tool chain\n- The runtime **completely** disappears in production, meaning it does not affect your bundle size\n- Supports themes by automatically converting themed configuration to CSS variables\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { classnames } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { classnames } from 'classy-ui/macro';\n```\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **classnames** function and start building.\n\n### React\n\n```js\nimport React from 'react';\nimport { classnames, hover } from 'classy-ui';\n\nconst header = classnames('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { classnames, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = classnames('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## Classnames\n\nThe **classnames** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { classnames } from 'classy-ui';\n\nconst myClassName = classnames('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { classnames } from 'classy-ui';\n\nconst myClassName = classnames('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **classnames**:\n\n```ts\nimport { classnames } from 'classy-ui';\n\nconst button = classnames('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = classnames(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { classnames } from 'classy-ui';\n\nconst button = classnames('background-color-gray-200', 'color-gray-800');\n\nconst alert = classnames('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = classnames(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { classnames, groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { classnames } from 'classy-ui';\n\nexport const button = isDisabled =>\n classnames('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { classnames } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **classnames**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"1813f4ad1d8a617d2b3573cec01b5e9045fc6bae","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-8QXl1PhQyQyA6oOzOtNk9EW44p5cPAOmd9cWzbd0Ve8CFct8pWGpaWv5Vw6JZltQAxY2mLN3623Fqpa0vEJ5mw==","shasum":"d01af321b79791514fda397872161ef83bfe862f","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.0.1.tgz","fileCount":73,"unpackedSize":278589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM+erCRA9TVsSAnZWagAAxlYP/0zyvXkv5NxXdrMA+eV2\nnBIyHEBCz25A4/uQzSjBrUpJbHVMtgYunQjZzCMJw5auw0Uazkz7b6SZPjFP\nwULIqSD+AJRDfz2V+ZI6FfCZzPQiGfK/6YamIosy1h/2gH0II/pqlJGgE6SI\nqMjt2l6NMpN0LNgfEIjuYDBdIAXckX1bPStN/4dh29A0BB5/u/C8pW1yfObF\nhOWcDByPrdtNRZaqUFhxFbtbrlXkHkbVfIJHbKbJO4WOS01FOSn9+V6v22YA\nVFDXFBtv5UfvctnqO9kDpyvIhajp9Qa+3BOB9fxAa5hh7x+9Tcv6HFOjm83H\nJiWqtl8I+YwQpFA5mF6v6URZP1G3+qaziByFv4Pom3nZGhEWlloTRS9Yx3nv\nGd8GdsAz25Up3EdVYYj0DfYprh7s3pL2uMYwWmsmTx1r5kULmKDfVtwSPoe8\nSJP7zScpoZYF3GMafpm9zPqaxRO64+joVrdWovYeId26lo1pFTnW0sl+4oZ0\ns9/d4tK+cRl1ET89vkrUlamZbmt2eSEFo8+6dTvaClk/zgd+qUDshb5eJnPW\n2cMYP8ueKyBbdCo5UnmAhaVNchfFgKOsWzqixnhGwyJP+ls7wM/L+EYVvkyG\nmFfc4tbYGVyWU5iCtf3sB4MztB+zK1kBZOZq78odRJCq1KFGKfbVKYyyyK0b\nvQdQ\r\n=iBv1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3P+9UoYG8kisQP6Jm03txfYbkdSfKjuFd9x7HQfbguAiBsqn8o/s8x1pFP83zKUwABc92VIIJFGHB8nFMn+uSVXA=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.0.1_1580459946696_0.8082582062348733"},"_hasShrinkwrap":false},"1.1.0":{"name":"classy-ui","version":"1.1.0","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\nWith great inspiration from [tailwindcss](https://tailwindcss.com/) we wanted to take it a step further. **classy-ui**, like tailwindcss, lets you express your styling with CSS classes based on a design system that you can customize. Where **classy-ui** takes it further is that it automatically creates the output CSS based on your actual application consumption of these css classes... and yeah, it is typed, meaning you can search for the classes directly in your code even if you are **NOT** using Typescript.\n\nThe benefits:\n\n- Typed usage of classnames from the design system which also gives you discoverability, traversing and searching for classnames\n- Lazily creates classnames and pseudo selector CSS based on consumption in app\n- Compose classnames together into variables or use them inline in components\n- Use dynamic assignment of classnames with conveniant `{ 'my-class': isActive }`\n- In production it automatically optimizes css class names and dynamic assignment. The created css file is automatically imported in your code, making it part of your existing CSS optimization tool chain\n- The runtime **completely** disappears in production, meaning it does not affect your bundle size\n- Supports themes by automatically converting themed configuration to CSS variables\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"761f5d681a191b532856746d1e5574973bf25f41","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.0","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-ZnqZ3byLbaI6kLw3BJfz7mRjlbVPlwAyxUXkAiICeyS1idIbiz4HWI3lDv4sV5e3hF9G3Kem+fu9nJMeEhkOtw==","shasum":"761ef9338af4de4008d725f12a25213d33099942","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.0.tgz","fileCount":73,"unpackedSize":278285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM+lZCRA9TVsSAnZWagAAxrwP/21f0HRmygozqP28rk0A\nHoaEP3TqN4lKSFYPX6TN+FklXnl3ec0W81DEjnrJzcwaoVfg0inpSdWBn/eR\nEhIEqXvtKAa84WldtgbeYTYHSSiXGGfJe6fwZIo535JW2mQQAebnPNlolPJ9\nqfqU/8ez4jlkfg9ik0FrUIhWB5GtEkpb2sTgONtMS49sLi2kZj4Vv7cq7vDK\n6P73DJkV2b3vkXEJkNYvy1+Ktns/8UDMlaEa6RLz0T98ZzqDHqICkm/kXR8G\nJipJAb6sFprxpmZzrUKggNUlIOFpC3826LdUzcpSPJQ6XDcGZkI3novp9s3L\n+Ykewh1bP6U9Fu9NbCnlDUHiYhT6FSdtdZOlT8IJRqotp7c14xc1iT2sj4KD\nbcKm2+JsgHv2GiwS8uvAidNn3QphaBRC5NxF5YCW2/r3sh/Mb0PvmKDZee7N\nDr3binixFfwpeDa99dqJpeeyZiP17wre6AVWv2rE7ETntR8uyLYr35pJlKL/\nX4zHjTqDWHCjT5uZFDgnWwaQ4OHyrbPmIV4vEkNzh/ZzuaPw0wd46X1yNciz\nklxRm1Mp8twLGGeB5nxbgJGODx6n6lGxY1inNoHdvpBicEsoKPvyC9UdVHdh\nAG+ZRS7r2NWMDoKpG/PjdCCw0qmUsWgDZsACJ9g8sqV+MSHZwxQ0c1zbe2Ic\n0stC\r\n=D+hl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoFtVQz+bGNn2Mmg5f0MMDgbiF8t5zo207uFZrRJWllwIhALqauQmaam9U1jeoohdikYvhssfNqf84nhWymIlUU+pD"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.0_1580460377336_0.7431693969832658"},"_hasShrinkwrap":false},"1.1.1":{"name":"classy-ui","version":"1.1.1","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\nWith great inspiration from [tailwindcss](https://tailwindcss.com/) we wanted to take it a step further. **classy-ui**, like tailwindcss, lets you express your styling with CSS classes based on a design system that you can customize. Where **classy-ui** takes it further is that it automatically creates the output CSS based on your actual application consumption of these css classes... and yeah, it is typed, meaning you can search for the classes directly in your code even if you are **NOT** using Typescript.\n\nThe benefits:\n\n- Typed usage of classnames from the design system which also gives you discoverability, traversing and searching for classnames\n- Lazily creates classnames and pseudo selector CSS based on consumption in app\n- Compose classnames together into variables or use them inline in components\n- Use dynamic assignment of classnames with conveniant `{ 'my-class': isActive }`\n- In production it automatically optimizes css class names and dynamic assignment. The created css file is automatically imported in your code, making it part of your existing CSS optimization tool chain\n- The runtime **completely** disappears in production, meaning it does not affect your bundle size\n- Supports themes by automatically converting themed configuration to CSS variables\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"6f28892c72a637c37b9dc252c2b5b02a8b8f0a88","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.1","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-vBhgOd3qzvw8eJDLpnw8J+fINzzTCCSpUDTcNEivnbqVBrLEBv7vRTGVYPIsHy9+jozZBAv1WVkr8n/17E/nDg==","shasum":"f67b26eebd892c38cda5379c99a6e7a01a1192af","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.1.tgz","fileCount":76,"unpackedSize":278827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM+qZCRA9TVsSAnZWagAAjN4P+gNJkzddOx3q+TvZIUdL\nZ53slaohAZPuV04Wr6mQZRLKLioy50UYdr8zIyrMR36+cvXtZ02GBP4DZPWp\nkrRI0JjpztvyX12WN5vI8oxGJ+772bQ/KBOuQWnmojo4WPST6/sPdr9yK4fu\nzI3SB1YX4sG4n++g5Fsj9vY5wyx/CqFBPII20SeSI5GbSGPUmMJzCIzuoFK0\n6wBOl09AarLvId5TyfpiKpxpe+18CGU1MDL6/slaZTWsfg6Bmc7KVOwOCgeI\nTDBWb1tGoENms1q5wG7d3pYgP4RtoDGU2db6JgNmwO5CUswf3WwzSW5fgQrs\nBhs1zfgSW+8urG5GkMf9PPRSL3k8nD4HgJ/a4QiETSRNThZdy5r/h8t2EuEX\np7GxZ8ECIDI1TI7hd3/QW0dAAzr5DMuxBY1NR59GUp1BR9vs6s67Io//CHCV\nN1pQujOAafX0iWRBXsCGJ3Rh3b5ONX6anZJs0TUAUgoyD/F941gxw3ZPs0zV\nJ4GADfOU9uk5c4AUuBF1jkWoDILQwZPvR2POW3LQwFe+ePogQ99bTN12Iznc\n9gXLRxk6I3lw1+oJyOY0Eqw2YBPnKfEbYiQjs2Y/gCkZDJB1qdsJ9KaltLiC\nGhLqU2/DkZ4hNhYHj1BWhpDpVA0OiGPzB7GNT9moGznjW40ggLOsJXNmXv5S\nXvL2\r\n=Muid\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoYNOgyLp65vUp1ua5TQ6NawgKz/GgyvkXQkx5pHAkswIgXwMn4bYsOL0ElIHef3/nhK91GmnFXi/FmLKXRQJzbSc="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.1_1580460696984_0.26379268702253267"},"_hasShrinkwrap":false},"1.1.2":{"name":"classy-ui","version":"1.1.2","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map} && node lib/config/create-types-script","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"29996abc3d3aa16cea9be510d753e9ef08962d22","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.2","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-j2s/4NQzTN4SEaA5DwLw7O/C4lRVncPsgwT6f0awQP+G8II21vX7NhDSfNH3hVn0kwv7BpO6BAgLwXGnuTd9jQ==","shasum":"a501d094f8fc74ef9482bbd366748123743dd92e","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.2.tgz","fileCount":82,"unpackedSize":354790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNGvNCRA9TVsSAnZWagAABuAP/Rzdbcd4h+0jZ8RxlJin\nNlXkdrAc8/OUlxIxhmDvF93oKRcy99/KimlN9lgEJjwyxKm3ot2Oqe31swDU\nIWnrRDppk/wWfpG7iMbpzXWeQKOGf71dfA+NimX5NSbX+XjlZAT6ydxG8h4d\noRKkujLtGiAcGFXDKYBrj7TW5WVWar7W39Y52mJDsXH/b5bwTCd/J68cu0pn\n/6DsnoD8dXovtYPmc9Zwe2gDS8QzRV+zUpZzVc2z7digE2Fjvpw820s/h9xG\nY5Eps9v4cLPxwWdyB3J8tFvBAeMnfTOp3/RZZYMmDd4pXVej3JE19dfzvvmk\nqSoFDs68+DM3j4x308Lx3vyOvRTOJ2PGJ+daU3aTRrLLQsISK+2Q3+oqwT0/\n5uTVCdQUOfRhkLinTRwlIfY47YEO9VT4wVOeuW2+jO3qLk3hXKO3nqvOW0Ys\n2pgh308DbmmAg89wLR7WbJcUoNMSZXq4omJfGNQvkHDZb02VbmeproSl5WJR\nEpQFckTHEMHpKvZJwGpHxJCj9BgXj8P2KorWtGZiEepDR3ywJkyIc0khLTkR\n9OVdRmk9qmLQJRRm3HoFPZ9vMlRFcLxrQlVeZibfKx/ubWFy9WfC4ojnLjSE\ngAf0CPJ5gXeHcVIQlVrOPDv1T1s7URd1m4wYEPkmMpaKBzxUnEGJkK9JaYtF\nFWhr\r\n=f1Cc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcEmzpUa3vXctBfj9j9gCqZfFCzLJfS8v/PSQ5fekp9AiEAx+jHo/de0AE0gekiHcfy168yKS07TdBcpKBALECdDIc="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.2_1580493773360_0.5165360051211128"},"_hasShrinkwrap":false},"1.1.3":{"name":"classy-ui","version":"1.1.3","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","prepublish":"node lib/config/create-types-script","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"4f3581cc16581572218f3e6587f1fad18bc1037c","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.3","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-CXVW65DALS7AwbSi+7ErM4A+3U9IKzOOYQ+C9RVnuJJ3NlANiIZiJYHp2cVKOdexWd4jefiF+wx/hk1aI/H70Q==","shasum":"4bd15c4d64d5890b581084f47e4ca6aeab478e74","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.3.tgz","fileCount":82,"unpackedSize":285852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNHPXCRA9TVsSAnZWagAA/38P/RuZxVqIwmLQkVDO6jpK\nDC3qXUiDBkz2LZeoWFYqNaSF5h61QPQrj27sR6TPYO10NMwD3eLnk0np+2jf\n+ovlEvDc9XVlA0tlcfsBjjyXnTj7DSENxbzwxofRZ6YFh2+kb0QOQFfEefG5\nAi2nW1jnb5IJR7B+CxBafR7claEVssFsa5Ijtbo+ghMup3SpZ5XThL1+UQMp\n9UjLzZkUdkq3NEu+ml0FzyjeLqcislZnqFchpYwM6KC7AeQihcxqPqPC9Bbq\nDkWBFSypnMbs/Vb5SQfw9L2sEc/vlD3r39XYZ7o+QFenW12MbOdATbgGDqTg\n52HDa6fV8ANvbM1fsQpimSuLBJ6x09+CsFEP+dcE0qvZ9q6+taQbrm/3HN6L\n4MPe8m9eK8NHyvyHSHKMXvKkSu85+Ye8get4beqSQc/ouwMitsb4FyZQIDDr\nq3/lc4nCb5/4zLnCXug99mLae3daHPwacm848uEHncbHkz9YtgDAzu1KqVFf\nxwUtbWRJFiHbA8cyeu9CG85x6WkmYgKyG2v5dvWfRTdrbRJQ+mq0OmcaD/N4\nENiZDH5rt8KvM7fBnY/kdKcJezx6icBmGuaAeCs9I+xobIl32HdKzGdxnaKx\njmJZlPUse5Ft5As/1rYdpcp3+si2t9zNGbNMMgPoGaiYhWy0wOPtJK5DAPyA\n8bnr\r\n=zUHk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIZaDfAN5CvpfcHxrv8LnFYIG3G8VGLV75ke21/UR/NAiEAoMf/KdoAA/vksArYVc0IdXIzbwQio3nUFa6cff99PZA="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.3_1580495830526_0.8550085293852807"},"_hasShrinkwrap":false},"1.1.4":{"name":"classy-ui","version":"1.1.4","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"4f3581cc16581572218f3e6587f1fad18bc1037c","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.4","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-8NuX22ORB97FnURF9iGrBjDdHSKONjPFb1YJv9XC4Ic5HsXnrubx14/HyhEQrRFlxXl9+gom3tGs+cwQrHQC1A==","shasum":"39d101a1f52d535e6c4573e0f24ddc85c816cc06","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.4.tgz","fileCount":82,"unpackedSize":354790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNHVmCRA9TVsSAnZWagAAKlQQAJgF7r+z4pzUKCjwFokG\nYZ1nvZQMVsyiNeMEGoE+q+dsYhaNIpyeycCfLs33eFCjgww0zFkOKpFzKAPu\nP9MUNYiK4MvNqR6jkvLkX2/3omKbfozySK0p6yWrI/l72nSL4XHWn7bzxZia\nkKvjeOZxsXlXwm+mKj+pi4iValB3CGHv2JGI1IIOwKvajgf5Vg0pFpqSIXgh\nkfQAyoRrCIlHuZAjgR8/oAQRy9niV2Z5dd3GCkB253toCh7H7i08eIlSlvjp\neKbZmG6mPeBdlI4nD76RGJkWpRpjM/7REGN+pmfQGUe9KtRYKbLnoT0S89im\nct5hwemsGoPX92bJ7zZf5tQWhP7XP3k4gUrYlD2wCmIglqeMegK8wcpJfOVV\n8v/b0GbJAO1TZFHr4KjZ7Lq68UGCiAbaCwUSEcmqpTO2CcFJgekB25RjMOgT\n+rZjjHUcYbZsGixyi/V8wNxglybt+Sn5hwQ810RCdl/lLY2Ow5hdKPnD2uN3\n4m8y/mSisHM+DnbHsrEAZtfJLfzY+s5oWIBeu5zpFdOU25wvgOvRzRYJiSXU\nhwv0KZZHj95kTK3TC6SqgYv+m9k/3M9T11mT53yDFk/tR2Y0y4cGnMmKHNZ8\nguUVzafUhLYKC3vwFl9ma3qAGmE2y2XAOr0hSsNBkTZiPiU2rk9Yy2Yu+BBn\nPEPW\r\n=Z+gF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAU2Ss64mOzF7D1ZccuFurm8pjcNCyW80vy4WKGRhq2ZAiEA+IkPVRGeffb6KmV2wbJZIZPsMk+9u7KfgaskYP0LrKk="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.4_1580496230380_0.12918038288548295"},"_hasShrinkwrap":false},"1.1.5":{"name":"classy-ui","version":"1.1.5","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","module":"es/index.js","browser":"dist/bundle.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:umd","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:umd":"npm run build:es && rollup --config && dts-bundle --name dist/bundle --main es --outputAsModuleFolder","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"886928c21167d7e4a0a6dfc7a13d0c491f455e82","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.5","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-1cjcqBBuXOrBmQgZ5zeqW8VAGSxorNH/aCaPSiAuNbk5Woo8xiyA+I0+kDZkXZf1rPqvXWEpHS6C8Kz9fcq9NA==","shasum":"52e6c1b0b56b36ff08bd277802296c5802c1dd3d","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.5.tgz","fileCount":82,"unpackedSize":356516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNRt3CRA9TVsSAnZWagAA5BkQAJVGYnAuxr7+0pEn5bDK\nugse9dof0JYmrcNNnQfYNGiSBhHvybyBc80FIa3Vk5DOX9kVbmH1qxiPl0LP\nsZi9NYyS9y3cNDUVR4ivH3M0CaCrGclkujxY4isyC9IZyzDV7pF6cmYywP5Q\n/Wo9x/CBkpMxXjPx+Ds0Mc8HCbkcPl3ncGRDNKp75OmAoUOPUGdgTAF+rCvF\nGJxMxg/agZ5y/V8rt74X3tLC08nmtTyNA3+Q6zwKGn9i/+Uw2Q0odxcdfH0P\nZFI4BnZX+CL7UvpmXwCKaOzT6rHCELuFHzY8UwaYoU/iWc/K8GMXZO5wa0kD\nceqweqDAguKVrKKc7dzoE/o7AXKqOYMqQhchQVnSHpfgKrDaiqrP1GJok4IP\nI1+m3nhhHzyHUt4qnYRwQdqgCXRdKvHU+pdOGJlN9RbgmcH6V40cXuKJap1Z\nAvGkGboL8Tg1m9m4185BNS6j9Z+M6CWbOgKXAB3hDAA9fjO6hn+/uXHfc/72\nl2xIR30C4HyRqQE2KL2kMdQBDHo48PxgLVil12rLGJJHD2C7fmRi0w4akMk4\nqQWYRGSTXiMHVcyhDJqz2hQ/t7WjNlmgEQZm/OT4KEVYRd88sBUeYe02K2ZJ\nulsmFe1mJanROg/SHJ9HyfSgfwk3nYcAGma2/e7padZAbDe6k6ozzi5xnVwe\n5c0F\r\n=Yy7u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp9Vf3iyALiImuB3fFdPkrFGsdYMa1k4lP8IqHt8OYCgIhANk9qim373GBWdPu43tqAEZF8l5O4b4bVbwI1x4keBtM"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.5_1580538743404_0.025941980907171036"},"_hasShrinkwrap":false},"1.1.6":{"name":"classy-ui","version":"1.1.6","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"4493fa97d4e6ceeef92acf3cb556bc7be2fd25d9","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.6","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-zz1IqvP84b/heEozgLokvwyHYIIFZVie1UVF2QXLIevyt5o7XrkzrSxqW32Ygpw6oq6PtXgxBBziJhMfgfsrbw==","shasum":"1e36c7a3b340400cd787f5fa3f8a1c213a7f911c","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.6.tgz","fileCount":79,"unpackedSize":350937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNYTvCRA9TVsSAnZWagAABekP/34+Lvi1uXmFb7mJVar3\nZcrIBK/+219zMuF1kYJSQ4WnH//hLgWy8zcnSwMU+VykXcDNuoq4lZ2lAQ9N\nFkiKHkUiuayZ6SNC+b7Y9vBGjZIiJyiAI5G/bM/jzdTqWq2+cALQDWMTYf5n\nWgyvMnSEgyIJ0fAMbvdk0yPDmRFmrTcx1sdsfJMpMqrxZ3ILocC+edv77xx+\ndB9ISZUrR81ayqW9R8IQr6adiK0OvW4XG5hDgVIX6Y2URMQ+K5Xt80ydoGST\nRbnS98x+ziKMqDZem7Ozk6KrbkW9RkkwnEwGL/cpPifMdrBARU6Cfvxj5hDJ\nnTnGeBUwmgIlP5/JLtHlodH12fWgwE+KiC4YsPRQkgzfI0RhRj5iCWT7Fhcr\nF+U3T+XfzyTs6W0P1bo7ptCqcuGt20QasQFgMG92Yill1P15YeYWlm2+8V+T\nQvaKmc/+0iBQZYY6hcwr2vlhNKuSeCLrGB3pG/WBgPEWmfU76luvNSRkCiDu\nACgJWPw9WnQPfFNaBvbm9J9c5QVGSMaTdf0quS8A4mAEWsZV1+8DPJJ3uPqM\niw7gSs9b39/IGUbuLuMJFSraupB/IShonGFS/JaxWZBGm7iyqCPy5LB3X/jT\nV2uIjEZdfV095A0UV8rrEeyOx23UO9+O3y9GxatlavsISDEnv7FfZnRlA0Pr\nlRUg\r\n=06vo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHtwimwhT6rQt/k4wSXFcG7Z3hqozMFy2sDYPZdyxOkCAiB0hztM4zpKKfehP0VlIJc3Zg/2fZX2nNe+JeZi+iU47A=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.6_1580565743269_0.4365308088748605"},"_hasShrinkwrap":false},"1.1.7":{"name":"classy-ui","version":"1.1.7","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"509c3d02af6cb45c3c289d90d5cfa9a34c755d1b","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.7","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-aMCN5H6yKda24mgJmPUeHH9vtq1rBOAEfcKz/sHCtmc1Hz2dL65FsgicKS0ZV9cfTP1CY8yfLzqNKloetRMOBA==","shasum":"9b5711b39a06c7e4b2bcfd5990fbca1b9e43b404","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.7.tgz","fileCount":79,"unpackedSize":353443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNZIOCRA9TVsSAnZWagAAt30QAJlMli+Ud3cRxnw9hp0C\nowoLRH5FJ1h0WxbYiKUrIzuvjN1HGpJwJH9GD4hpXmp/4TookLloXqlzJEzM\nP8LaHAHyqDJjD2IIMZeGQaFSByZcwRWdXjON1d5B75SBX0v6wtAqCOLoBnwJ\nQ4T8vd6FB8Vi1QLLhCOXHE6xBD8XpyDcHtMtR44rN/fQfPLtM6E36hSRHikB\n96ZLS0r78ruPO6PmxS/BCH0fiYThVGMUmQmdKYwhqutYRNuWh+hGH0J0l4Ge\nmNWUYo+YNOlHHEsXuzS05SppCFvtRgzXZr6p6pIf+X+TupTiKB/If/Qk5ML7\njP+1DlOkqZRagDzTVxQY4pzQ6j7znexh8Evl1LDaa+x4eBlupqxgoUf7UFRe\n6dNxn8Vu2L6ElI2NnrGjdEvqJk2puu8KZkpSayNNBA45BfzJj7rqfeozdkAf\nxaNeuXF9lGf8nWZb5BEw7fp++tS6tTWS+rf8jR3HJ1r4we9ubEoZDhxlfnGK\nN6dPev++klxyo/tw2A2/XiWh3HXlMyie/VdBWVgb+gFXXxqneDcTXX8167Cp\nplEd+QmWseMZtFC5v9SZfMHgMv4e1gKQU1gMcpBUur2IFtNDSbI7BRnWeho8\nXTN4LJhJJvhiXPMn1qHrbmgWmX52WcRFjPaZerPVPJU+sNW1GZt1Dk9bn4SZ\n2z78\r\n=4NB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF1BgVXWQiiPxg6bj+mtXuZEwgUzTV/B/9i172+aqNRgIgJh3kPZXWkueo5vrqwb3iaNU3ZZ7skSa5yAc5hJZDS1A="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.7_1580569101890_0.33502649994780387"},"_hasShrinkwrap":false},"1.1.8":{"name":"classy-ui","version":"1.1.8","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"ac55eca4828a1d2e9354e8a85a0276f39771888f","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.1.8","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-K71PeITrLnDrY42iU3fF7NR9iEcE/zKhT65OhzlZrapYeeBCAYJbMwmn8T59IWCdm6bCF7jhxxnR56qLfsG7+Q==","shasum":"dee92221de8dbeb86829ddab250bc3da074acc5a","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.1.8.tgz","fileCount":79,"unpackedSize":359391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNZJjCRA9TVsSAnZWagAAVMoP/0dyDx98lMR72uC3XeP7\nDpkk+e9hMD9ptfGYOsYq5+aO/OCEnWzNoRVDaLypowOpw2qKyVIGAkL6073n\ntZ71ms19sZ/WxnzqQemlRhsq+B2zD3u3cRp8CIhMlQvqjDwyyAH//PRtr82X\n1kZ1XU1EJXb4lcfCot+iaQ+UNXVnAQ52q5p204IrpXiPM52TvVtUpROlx14i\nczbGgP65Fhsz4850eO1LJjmXqrpcLkbAcwb0i3KEHKL98dwjgVpxcff9kuNZ\nYlTi+1CBGl7z0ywC3cMAbJnVmeYjReiJB4O0ozG5Ozf9xkmv68o0KyjEOD0a\n58AuojRf65MvOKB3VLF1003iphm1Ur6x4+CvrETivVZL9jeQQDiHLXhr2yqF\nuPfuhIxFw4+Km8Z7AcIrdQwRLgzYuqqzJiQZKjudr9ZFf5T3ezLrCfrpcVa5\nUZTzFn+ZN5N/BCnSVoubEGJKpAXgDRDLiS65qbISs0e+4146048d8SNoCmkj\n5C02lZczDoUv53zfSC5asRIIkYS/wtUv2pzAIMpz0kZqmuUu/0G819UFRRKF\nKPX1fY1lyh7IfQSskDn96gOAgEdNo0zdmkhPvhKH5ZliJmHvz65ObNEewJpn\nanUX+UND6tzTp5YoKfU9w4MvVleYuJ0jVdgxIN8Mp65eIHG4kJRbjtqweDdq\nDwET\r\n=mt95\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSIsd8eAtZz1uMMYaRX8OXrNva3i9jvu5AMMmwgP+SjgIgHCMeqAX7C62/efrZNPpKTm7ntTOwioYyI2u6OlqbaRc="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.1.8_1580569187397_0.9527974646692101"},"_hasShrinkwrap":false},"1.2.0":{"name":"classy-ui","version":"1.2.0","description":"An automatically optimized design system","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","csstype":"^2.6.8","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA typed, configurable design system with no runtime\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"0522137ddf9cff8a45c4527a1555894a36464830","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.2.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-rQISUFYgURsxFrJGtmX3HKeho2MTc4nPkCN/p1jz6b18bGYxeo9kTzkOP0IUXJOS3rU5dX/j9ubr3KEov9zVlw==","shasum":"2ced40d779800c2e29ca0984b8aeb6d7269150fa","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.2.0.tgz","fileCount":79,"unpackedSize":376376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNfc7CRA9TVsSAnZWagAAdY0P/janFQIHCdNmCDXQ66D4\nf7iMqQl2h2Ic9p7G4C5oINxoPAWImC6XVmImkLAdklGH3k1PCgp1eD94rT4h\nsnFNqZys+rMOrkvjD4v7DNJbai5mD3Qis4+crGfA9EEVSA4hVUMwBZqJZ372\n2WNhGZao4lMtyhhxDDhrJ0WDaY1wQe/47+CSQhLoFV9t0yxGkELNZWiTopHz\nR5uvE45Jl5z/ZdhEhwj7+lBHS6lxnC+Uhcf0fgv8PYPrnpJxz0vjuu56ACKe\n9j+VnBPBK8reLkqSSVZHPf0qmZCM3FTWjVyH9enQ4gT8vUkyvi/cCh7KFO+T\njRn68ee1vwziUTme/5FagS0JKmZR9oeuEChtC+NQFuEIGLjRnlPFvT7fpoC3\nDy4Q3bBioJQX7QOJrFlohdalGjw3H2evZED36kTolM3l1Et+rgB/Xt9XaSgL\neXQGAoU+f35pVrDHpjqW3Dgw1OqQJqMbMbvQBNvSU4zyWGZWCfJVYoLySjXG\nbirLJh7uXFRMfRLcPDYJU3T9HW8c/IeZb/jUHPOhVoMXvMyzkahBuRNjx66Q\nuukp0T7Jcqbfp3YhGFjdcuZAquFU7948egcgZ/8NNcvdWKlDV9/WiQnkUElG\nVWGWaz8YELgaHFDp9nwAcRoiM0aAaEDs5J5VcxxQtNdF1Ndag1ZL/mHNNdko\nSYSb\r\n=gvAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdizjhxJ9fhd31lKhu2QQaLhS6YMd3Z+WHKySLEAH44QIgEWCkaPRRYFhUljU2TIWmFnCjDXfAKnv3UuEaMR1G9IA="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.2.0_1580595003379_0.3669296093510075"},"_hasShrinkwrap":false},"1.3.0":{"name":"classy-ui","version":"1.3.0","description":"A framework for building and consuming design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming design systems\n\n## What is it?\n\n**classy-ui** is not just a styling library, it is a full fledged design system that automatically configures itself based on your application code. Worrying about your bundle including too much or too litle? What about pesky specificity issues? Those days are long gone. Just use the API and **classy-ui** takes care of the rest.\n\n```ts\nimport { c } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2');\n```\n\nWhen the **classy-ui** babel plugin runs it will do two things:\n\n1. Evaluate this code to:\n\n```ts\nexport const button = 'color-gray-800 border-none border-radius-sm padding-2';\n```\n\n2. Using the configured design system it will create the classnames and their accompanying CSS and expose it to your application automatically\n\nYou can continue wrapping pseudo selectors:\n\n```ts\nimport { c, hover } from 'classy-ui';\n\nexport const button = c('color-gray-800', 'border-none', 'border-radius-sm', 'padding-2', hover('color-gray-900'));\n```\n\nAnd again **classy-ui** will create the accompanying classname and CSS.\n\n### The benefits\n\n- You start without a single line of CSS. Based on the API usage **classy-ui** automatically generates classnames and CSS for you\n- As everything is based on classnames you get concise language for your styling and with high reusability, meaning your bundle size is kept at a minimum\n- **classy-ui** is very smart about your intentions and completely gets rid of specificity issues\n- When you write classnames you can search them right in the code. The types are generated based on your configured design system\n\nThe design system is based on [tailwindcss](https://tailwindcss.com/), the configuration is actually exactly the same. Also thanks to [classnames](https://www.npmjs.com/package/classnames) for inspiring the composition tool. All projects stands on the shoulders of others, so big digital hug and love to the maintainers of these project!\n\n> The name **classy-ui** enforces the idea that your UI becomes an elegant, optimized and concise set of classnames based on a design system\n\n## How to use it\n\nInstall the project:\n\n```\nnpm install classy-ui\n```\n\nAdd **classy-ui/plugin** to your babel configuration:\n\n```json\n{\n \"plugins\": [\"classy-ui/plugin\"]\n}\n```\n\nStart using it:\n\n```ts\nimport { c } from 'classy-ui';\n```\n\n### Macro support\n\nIf you are using **babel-plugin-macros** you can go straight ahead and just use the api:\n\n```ts\nimport { c } from 'classy-ui/macro';\n```\n\n## FAQ\n\n### It is not working with Parcel\n\n[parcel](https://parceljs.org/) ignores `@babel/preset-typescript`. That means this package does not work with Parcel out of the box. You need to use **parcel 2** or configure parcel to use babel typescript transpilation instead, which **parcel 2** will do out of the box\n\n### The types are not showing up\n\nWe are dynamically writing the types to the language server in **VSCode** might not pick it up the first time. Do **CMD + SHIFT + P** and search for \"restart\". **TypeScript: Restart TS server** should pop up. Run it :-)\n\n## Consume your first classnames\n\n**classy-ui** is consumed through a Javascript API. Simply import the default **c** function and start building. Think of **c** as **classy**, **classnames**, or **compose**. It is the core tool to compose your design system.\n\n### React\n\n```js\nimport React from 'react';\nimport { c, hover } from 'classy-ui';\n\nconst header = c('background-color-gray-400', hover('background-color-gray-200'));\n\nexport const App = () => {\n
Hello world
;\n};\n```\n\n### Vue\n\n```html\n\n
Hello world
\n\n\n```\n\n### Angular\n\n```ts\nimport { c, hover } from 'classy-ui';\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n template: `\n
Hello world
\n `,\n})\nexport class AppComponent {\n header = c('background-color-gray-400', hover('background-color-gray-200'));\n}\n```\n\n## C\n\nThe **c** function used in the examples above is what you use to create your composed classnames:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', 'background-color-gray-200');\n```\n\nYou can also conditionally add classnames using an object:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst myClassName = c('color-red-500', {\n 'background-color-gray-200': false,\n});\n```\n\nYou can use an existing composition with **c**:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alertButton = c(button, 'background-color-red-600');\n```\n\nYou can even dynamically compose an existing classname:\n\n```ts\nimport { c } from 'classy-ui';\n\nconst button = c('background-color-gray-200', 'color-gray-800');\n\nconst alert = c('background-color-red-600', 'border-color-red-800');\n\nconst submitButton = c(button, {\n [alert]: true,\n});\n```\n\n## Decorators\n\n**classy-ui** also ships with a set of **decorators**. They are functions that adds functionality to your classnames. The decorators can be composed, so:\n\n```js\nimport { hover, firstChild } from 'classy-ui';\n\nconst myClass = hover(firstChild('color-red-500'));\n```\n\nWould now make **myClass** red when hovered as the first child of a container.\n\n### Pseudo decorators\n\nPseudo decorators basically adds things like **:hover**, **:disabled** etc. to your classnames.\n\n```js\nimport { hover } from 'classy-ui';\n\nconst myClass = hover('color-red-500');\n```\n\nThe following pseudo decorators are available:\n\n- **hover**\n- **disabled**\n- **focus**\n- **active**\n- **visited**\n- **firstChild**\n- **lastChild**\n- **oddChild**\n- **evenChild**\n- **focusWithin**\n\n### Screen decorators\n\n**screens** is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are **sm**, **md**, **lg** and **xl**. These are used to enable classnames within the respective breakpoints:\n\n```js\nimport { md } from 'classy-ui';\n\nconst myClass = md('color-red-500');\n```\n\n**myClass** text is now red only up to the **md** breakpoint defined in the config, which by default is **768px**. If you were to change out these **screens** properties in the configuration, their respective imports would be used. They will be correctly typed. For example **tablet**:\n\n```js\nimport { tablet } from 'classy-ui';\n\nconst myClass = tablet('color-red-500');\n```\n\n### Group decorators\n\nYou can also define a set off classnames with the **group** decorator. This allows any nested group decorator to trigger based on this parent. For example:\n\n```js\nimport { groupHover, group } from 'classy-ui';\n\nconst myParent = group();\n\nconst myChild = groupHover('color-red-500');\n```\n\nNow any **myChild** of **myParent** will be red when **myParent** is being hovered. The following group decorators are available:\n\n- **group**, creates the wrapping group and has no CSS side effect\n- **groupHover**\n- **groupFocus**\n- **groupActive**\n- **groupFirstChild**\n- **groupLastChild**\n- **groupOddChild**\n- **groupEvenChild**\n- **groupFocusWithin**\n\n## Factories\n\nA powerful concept brought with a Javascript API is factories. Instead of having static classnames, you can rather build them dynamically behind a function. This function can take any options you define.\n\n```js\nimport { c } from 'classy-ui';\n\nexport const button = isDisabled =>\n c('border-none', 'background-color-gray-500', 'color-black', {\n 'background-color-gray-100': isDisabled,\n 'color-gray-500': isDisabled,\n });\n```\n\n## Custom config\n\nThe basic configuration of **classy-ui** looks like:\n\n```js\n{\n screens: {...},\n colors: {...},\n spacing: {...},\n backgroundColor: {...},\n backgroundPosition: {...},\n backgroundSize: {...},\n borderColor: {...},\n borderRadius: {...},\n borderWidth: {...},\n boxShadow: {...},\n container: {...},\n cursor: {...},\n fill: {...},\n flex: {...},\n flexGrow: {...},\n flexShrink: {...},\n fontFamily: {...},\n fontSize: {...},\n fontWeight: {...},\n height: {...},\n inset: {...},\n letterSpacing: {...},\n lineHeight: {...},\n listStyleType: {...},\n margin: {...},\n maxHeight: {...},\n maxWidth: {...},\n minHeight: {...},\n minWidth: {...},\n objectPosition: {...},\n opacity: {...},\n order: {...},\n padding: {...},\n placeholderColor: {...},\n stroke: {...},\n strokeWidth: {...},\n color: {...},\n width: {...},\n zIndex: {...},\n gap: {...},\n rowGap: {...},\n columnGap: {...},\n gridTemplateColumns: {...},\n gridColumn: {...},\n gridColumnStart: {...},\n gridColumnEnd: {...},\n gridTemplateRows: {...},\n gridRow: {...},\n gridRowStart: {...},\n gridRowEnd: {...},\n transformOrigin: {...},\n scale: {...},\n rotate: {...},\n translate: {...},\n skew: {...},\n transitionProperty: {...},\n transitionTimingFunction: {...},\n transitionDuration: {...},\n},\n```\n\nEach **category** is structured by a **label** and a value:\n\n```js\n{\n transitionDuration: {\n '75': '75ms',\n '100': '100ms',\n '150': '150ms',\n '200': '200ms',\n '300': '300ms',\n '500': '500ms',\n '700': '700ms',\n '1000': '1000ms',\n },\n}\n```\n\nMost of these categories maps directly to their CSS property counterpart, but others affects multiple CSS properties, as seen here:\n\n```js\n{\n padding: ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'],\n margin: ['margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'],\n placeholderColor: [],\n gap: ['gap'],\n rowGap: ['row-gap'],\n columnGap: ['column-gap'],\n gridTemplateColumns: ['grid-template-columns'],\n gridColumnStart: ['grid-column-start'],\n gridColumnEnd: ['grid-column-end'],\n gridTemplateRows: ['grid-template-rows'],\n gridRow: ['grid-row'],\n gridRowStart: ['grid-row-start'],\n gridRowEnd: ['grid-row-end'],\n transformOrigin: ['transform-origin'],\n scale: ['scale'],\n rotate: ['rotate'],\n translate: ['translate'],\n skew: ['skew'],\n transitionProperty: ['transition-property'],\n transitionTimingFunction: ['transition-timing-function'],\n transitionDuration: ['transition-duration'],\n gridColumn: ['grid-column'],\n width: ['width'],\n borderWidth: ['border-width', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],\n borderColor: ['border-color', 'border-bottom-color', 'border-top-color', 'border-left-color', 'border-right-color'],\n borderRadius: [\n 'border-radius',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius',\n ],\n fontSize: ['font-size'],\n fontWeight: ['font-weight'],\n fontFamily: ['font-family'],\n letterSpacing: ['letter-spacing'],\n lineHeight: ['line-height'],\n boxShadow: ['box-shadow', 'text-shadow'],\n zIndex: ['z-index'],\n backgroundPosition: ['background-position'],\n backgroundSize: ['background-size'],\n cursor: ['cursor'],\n fill: ['fill'],\n flex: ['flex'],\n inset: ['inset'],\n listStyleType: ['list-style-type'],\n objectPosition: ['object-position'],\n opacity: ['opacity'],\n order: ['order'],\n stroke: ['stroke'],\n strokeWidth: ['stroke-width'],\n backgroundColor: ['background-color'],\n container: [],\n flexGrow: ['flex-grow'],\n flexShrink: ['flex-shrink'],\n height: ['height'],\n maxHeight: ['max-height'],\n maxWidth: ['max-width'],\n minHeight: ['min-height'],\n minWidth: ['min-width'],\n color: ['color'],\n}\n```\n\nThe way the classnames are evaluated is by looking at the CSS property itself, for example **border-top-width** which maps to **borderWidth** which again maps to:\n\n```js\n{\n borderWidth: {\n default: '1px',\n '0': '0',\n '2': '2px',\n '4': '4px',\n '8': '8px',\n },\n}\n```\n\nThat means you have the following classes available for **border-top-width**:\n\n- **border-top-width-default**\n- **border-top-width-0**\n- **border-top-width-2**\n- **border-top-width-4**\n- **border-top-width-8**\n\nTake a look at the [base.config.js](https://github.com/cerebral/classy-ui/blob/master/src/config/base.config.ts) file. You can override any of these categories with your own file called **classy-ui.config.js**, which you put in the root of your project:\n\n```js\nmodule.exports = {\n defaults: {\n // Use an object to replace the current values\n lineHeights: {\n tiny: '1',\n normal: '1.25',\n big: '1.375',\n },\n // Use a function to look at existing value. Use this to merge\n colors: colors => ({\n ...colors,\n primary: colors['red-500'],\n custom: 'red',\n }),\n // Use a function which returns a function to create a value\n // based on any existing config\n borderColors: () => defaults => defaults('colors'),\n },\n};\n```\n\n## Themes\n\nAll the themes defined in the config is exposed as classnames of **themes-{THEME}**. They are typically used with dynamic insertion in a component, for example here with React:\n\n```js\nimport React from 'react';\nimport { c } from 'classy-ui';\n\nexport const App = () => {\n const [currentTheme, setTheme] = React.useState(null);\n\n return (\n
\n
Hello world
\n \n
\n );\n};\n```\n\nIf now **dark** theme was configured as:\n\n```js\n{\n themes: {\n dark: {\n colors: {\n ['gray-800']: 'green'\n }\n }\n }\n}\n```\n\nIt would change to **green** when the theme is active.\n\n## How does it work?\n\nAt its core **classy-ui** is a babel plugin. When added it will look at your code and fin imports from the **classy-ui** package. It will now analyze the usage of these imports and replace their meaning.\n\n**In development** it replaces **c**, **hover** etc. with a call to the runtime of **classy-ui**, holding the actual CSS to be injected into a style element that is already inserted in the head of the document. If the classname is already added, the code is just removed.\n\n**In production** it does the same analysis, but instead of inserting the CSS to be added, it just removes the code. The CSS to be added is rather added to a **styles.css** file and your initial code is replaced with an import of this file. That means many files will have this import, but your build tool will handle this correctly.\n","readmeFilename":"README.md","gitHead":"0be05b57b5ba2b0d294db1a3ba9cd97456c3c24b","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@1.3.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-C9Fk0JPm/pQMfzurTYkkH7ZevPtvziTCN6MsxmvqSu4/qjNn73VCefcfdifZ15kDA0vRW9wysykryaSrD7jXgQ==","shasum":"2cf613a37561ecadd0a51eae05d67ea2ab0eaf39","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-1.3.0.tgz","fileCount":68,"unpackedSize":243627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOlYLCRA9TVsSAnZWagAA2PEP/Ao6A7WpmEve9HhTdHqt\nSquU3thNoq/ELHDcYcGf/aM+s4iqDtYBGBkqmqbcOiBV+e60bSX1LOBFcssa\ntCkJ3OyiKNUmV3SA/K3TBuqGi/0cPtU09c/pAFLnQ3ndba54rj4w/4eIbCEB\n2ewQgUNDXlkSGcxmALj1ZgKlC0Av/cSYyM82LhK2ZlSyDUrdba4zPGQFvBCD\nITApiB2z2MgZ6Wc41wbNiqg/0+5FoUiNZ8I92lR/9mtocCJY/k/sGDDj9R3e\nDSiupu0ssoD0Mv1ESSBRN+vcilgiVXZHuzma6Kk2xpDuNwJtR54bBVAkQDNx\nGHrDxKLjD7DG5ioW7P1jX02bqzya5RBvcTkC37Arr3z6kfRS3W2hSwPl3kkj\nGrL9Pfw092YFmVMP3cJin4BL1HJO3sKYUq8fBPZBP45ZU/hB8kj//AYWPx2e\nsDoNFp37f8+NvJY+gOy2oIxh8CAXka0zqVlSEbTJNPwcZZJFGEUacDxNjOm5\nFdMyvALaxpJ3U3U6bOn0YT1XJmq/aDNI+25Q2PkiUDa2OIhy9SNin+hp5EQQ\n7P19DPT1ZKYjXD5YW4UFwTbJCpnof9iUAsbd1wnRhQkj8qzilhRYGEEtLD2V\nFqNtbHuugAwv2P3WTvNSgGMFe/kyKZI1DiV9nSnKr8eQgTFWlkE+hX5fdJfb\naZxr\r\n=IaFd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvVUsPqjULbmmVD7jF3PxhZBLIYSlqX65ukw7VCyyg3AiADT4daqlPtIxXuVu0foBCi6BFPtNF88bqeYNThLzdaPQ=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_1.3.0_1580881418502_0.31338933151175175"},"_hasShrinkwrap":false},"2.0.0":{"name":"classy-ui","version":"2.0.0","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"cd4ab9dcdd119f5e0700b2013e7ce24d46d7a8d7","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@2.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-pElB43/sVJ08XYiUtRMPObhAulZtd8VaS+pyeh15XyDbHipxZ7VXR8Ayo04rR4HrC7DTUO45Pkm2U8Wtu9Z6aw==","shasum":"46997f7a1a56eebbf237c279c83976403ae9a11f","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-2.0.0.tgz","fileCount":77,"unpackedSize":478801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO+iTCRA9TVsSAnZWagAA2fYP/04FhxjgUE4TG9EcXsTT\nqvQ48xHUEjupsB/XgVyws+L3LFqbtwk5uepqad5jWc0sVQTwSZ/t44/ZY35E\n7gXNRHPclfuHM6ifjAWi37WEURSjT6sPSckPprx9RQoIQi4wnx4UAX6Avmio\nbCO/oADaHyypT1ZUZqWwbNdcNP0EoBAZUctJbnptPwrk/gKBFR9p9hzh1Ac9\n/D7NWcuGdwAWlKw6ofwpuSTUyhDmCBkFThQzhi3MhsYBkRBduxzKLLIk4Jrp\nW532T8Y1BAInOmwL1MtQTJ/tWmbkM4nYzi7ry5wghcXA3jSr0myxLOy5NKXN\nvPu4Tu4gQP+9q6psb5FKOyNMiTvg9iu6oX2SOzoVXv1nJmTmjNqbM3PJvWF/\nUS+RLEjfcimtIyD50ApeU7JNk7V+cX7/JN5aOu9AwaCGNIDzDeiR12hylU6N\nsCKmLH3avYD+WgMP8/ewxlAG2x49gMqecroCkg/HDb8BYOle+aVPwdqcBOzt\nDALgdVSHC07OMmq01mY62bfvV9gMnVJgSv3xNjmqaJudtSdLAFkfHt8Go3uE\nngr1CX03ty2ViziXfE43igWdhjkz21Sh7k5+56szV8Nw0v2DFeBcg87DIcyS\ncYCORGuoBnD4hy/2j+Pr+8s2w+20aKBNzN3NcROKTO74g9qvPJg+eTweQUnH\nnQba\r\n=TL3S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/tGDBlNvQ+3aKRsd0qmQ7Fw9pLUpsT6PH4E6ANAQVcQIgXJSpBWJLyZcTNIUT4SATonSoUf3hlgdnPKGW4lVracM="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_2.0.0_1580984466706_0.11819800496638688"},"_hasShrinkwrap":false},"2.0.1":{"name":"classy-ui","version":"2.0.1","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"32a37ba607129b04b1cdfb4a0d141ef14ff32467","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@2.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-ksRTbLJ6kvF8xIh/U2mjjTOzwH+FsL7JivvgphBdLBbQ/nIjdiEFBZch87gXyAghUM2AUygpuUevu88ojnDXLA==","shasum":"9b64339a00186ba0d5da18e85e12ff619b9c552a","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-2.0.1.tgz","fileCount":77,"unpackedSize":478801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePEy/CRA9TVsSAnZWagAAEgAP/RMfBYpuxpB6DhHe0JhT\nQQbglknv/FpCOfn+yuVoXrySybcYMhKgscxJACQ3NCROuQAWPWvnFAmasWeU\npA6ddjJpL0weBYqooppT0blGlgBxaeO6XeDyOGnMpKiv4hTp5lIlkFOjaHIn\nCGbHXiIzBwc4+YqeaYnIf5ZhWO1ID0YFKEIEF1XBGrQMfzm+iCSkReqxQmtt\n08cJj5HJ4oYRQhPhgffgt8O8iBGlz7+cnoE7uE1ZDlPRLimpUARoQxLxN8X9\n85588MR4wq3YCr1rVneZycNwKM6bu2lR1U1sXhw3GeqUHlGuARmWmzwDVGPm\nSAmjx21eJ7pQD+Tjt8eezI7GYl24s3bERrNoXHaXyF7YpcVyVz3aE4lIcHvV\nDlfxssWCPkDBM/S+TTvnv81f0qYB1j79aeKfmnWtLIIhlh4z4cTdXQxJXg4l\n6BtlGXcsbq9o71C914TkK1nFdx8uH0Fa2NnB4o4Trpx7zvlztQrnrCjSB+5w\nOVOZPnrU6q+D7KyOB+7cm5vEz6szDhFRIWe6bNh1LELcy+/APsktemIcP6zX\n/JdgXebD7I9BBY9Vo7LzCZBeQ5XonRTX4sodqUvrFu41HnLgS1PqKRmbUIB+\nK8dagBbNNBWu44Ncs+2U4FCwhYArIhnKZ8ILpatd6GEb/mHWMfj9hDh6GjmL\n/JZa\r\n=gVj9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf+yk8CTgg+vA4IY6FyB4wTUiXtz1eggzpLsDHD2KrigIhAO4FkGU1e3bkbx/+Mytb/Vz9TsPDwyQrWBVJWJfgNr1V"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_2.0.1_1581010110968_0.13384409461135816"},"_hasShrinkwrap":false},"2.0.2":{"name":"classy-ui","version":"2.0.2","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"9a38da64317fdb8ab182eb9470ac1d14b7dd5f9a","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@2.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-kpNTtRcJ8NA2/dO8KDRohWybNdJLeeYBVs+Oq5PxfqKeBV+qX+qG5rc+IxhKn87fNG2piiV6FMBVgcFdBlurRA==","shasum":"ae2927c56e695490f562056142ee8519280c5142","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-2.0.2.tgz","fileCount":77,"unpackedSize":481227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePFnqCRA9TVsSAnZWagAAHZsP/jeeG8vNWrR7UU2Zqw1i\nndpOFaUUw9b+uEthXHv5I/eun5aAaWYwh5Q++4I7dkI+teOm563pgJ65UzcE\n0LZ6KtgzbgVuN1ASRraSu5BsGBsxYBfeeIaV2D/aG1vU/452/E4ofVtqeU93\nNpEqJHZze69Gl6/YDjpobdTbCNwaAEUmwHWJGUgTEu0NP/ZR6ZrnXjQPiKkU\n4a1rv2FYo8ksSli4uEQUeeXSfPBtQYjqLQKe8cajmT1athPP+gcb/mYqDUjJ\nAG6XRVWxOTqq1ht1CHxUEzHzc59ecPeXIMhViFLk/8Ge3czwA+AIhRVXRR18\nb7QA21texqVkPiQO4fbibvamB0iENG17rxYF9wEh7IfkSvOl5GgcAxVcQTtp\navAryF1CAtLy4wDcPZ7wKAiBURm4K9G3owMTVJ4l0TdBEd7KN0iRdsA2OcFW\nLFslwbtYn41xIJhin1tK0wKfCVMNr+gAFrnsG8esG3hgGfITSstds58hPolf\nZA4S5JOkX41KBl97L8COEKXyM1vgya+fQ11WThSU6MDJBcAZmMjykz3b7W30\nU00KErL8cQdjKlE1eoGg8JbqPbHKHbpawzXElVmXajySylWogQ+WjzLiqvxl\n6P7MSAIkKKFe3A+ECzrY+krxXpJ4GyYyaz066kojKTA9k3I1P+frE8T00NHx\nkZhx\r\n=WExG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFymmwOadDd027vQ5hw+epB0fOwWk1oA1ZphphwcE/9oAiBFHlzGWUselmuUdFCBpbvrrg7745KiyiyOLX0RykRsJg=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_2.0.2_1581013482123_0.5171442372494759"},"_hasShrinkwrap":false},"2.1.0":{"name":"classy-ui","version":"2.1.0","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@babel/helper-module-imports":"^7.8.3","@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"53ad1a5d6849af990d22f2cc4aedcc35c4886191","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@2.1.0","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-oydePuGLKg65KtvHGDv9qSGzNtASU2H9a4RV2XAl48eY10v1YxD5uBf9X6m9Ck00gh5iEOFKflTmx92Q2UFlYw==","shasum":"52888ee3ad46eee5a6c008b83fe84a77eab1cea7","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-2.1.0.tgz","fileCount":78,"unpackedSize":488393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ+aICRA9TVsSAnZWagAAT4QP/RA+2kHzNBrsHdHLprmq\nYnEh+oxFzGobrVxQhLW8Aq3eUC0K5wQ8F2nd5KaWcfrUEaUzOJRU+lsZ+j3u\nLguhk4LkUe+0OCukVk+ZimfOwZoPzHE83mh5iv8f5yp6EfKNaRFz/OC9lCYn\nYnDb9iA5dAG4x7QsaDP1g8hEbh3XBiTyu954ugsG7xUbUehB7UQuJu2ap/L4\nw1T5z8qg1JoZCmT6S2WvSS9caOuRqtnLtFtFl4FDIKv7qN08hYNccoXoLyJN\nk3kWHGRVFISiolPPSO9Miloh+WMYHNJjRYjfEoEtwIhHzPd78YmsE1DjdFIK\ndhom9O6gnRCKXFJCIXDuk+Doe+5hb5ubNWdG2Py3Y8lzAGGGK+UWMlYFZdHi\nhVLNeepP7f6+cKhik+3boyORbl6IbGxiePFcLOw9l6GOb1c/4ErHQX7tTUb8\nBd64t6piKGR582nTFFiOG0ykAjB82H1+hW7R0l0QZbMqN1DyEX8tvsLTjtOp\nW9ypGzUAySWPYhQpcfp/xLHP2Djq6ciXdyVbNoSk9O3spe5JDzXIdrBZM9yP\n+NaEnEaJol1wdZRjmjUmIWgP7L7rnFkHrXeDlQ2KS631aRz0+BaLfezSaUoP\n6tr3a1xjvIrFdoEBm439n8wj+krD2J9ZvFy0pgBvXTFmp2ct+w/i50dTukzE\n4IWZ\r\n=oyxm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAmySdnDX7lPXnptBjAOz2wENq6wzlNKqrruKHlOe6VQIgPLCMJtbtNqElrD89epgDzkIlQTvWrUhHsKAyitznP7Y="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_2.1.0_1581508232387_0.843411393684673"},"_hasShrinkwrap":false},"3.0.0":{"name":"classy-ui","version":"3.0.0","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"50805c8be0763332a5b3224d1680fa96527eeeb3","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@3.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-GFjfGI8/RWtwFWlXWNLF2iAa6WRg/C3na2iafTmzn3q/HAxSMcbLjMks5qIrXP6pHMxTc74F2lMC975PP7ojdg==","shasum":"4392b9acc6c10bdb8287391485636eb6cef6dd85","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-3.0.0.tgz","fileCount":74,"unpackedSize":459261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeROkCCRA9TVsSAnZWagAAvDcP/iDqZzngsa27iZzgPe+t\n6jyFr9bzjJhuac9zSGbkjgmRzz9mdUpWYcQHiB73LOGGw+UXo4glv8c8C9fX\nUwG91z63dbeVrzKZaFpb+BHoOIyLkUIHI4vPC5yTgrpHNcVZ+GuW/q3ERPMz\nPQD3OK017sijB9tDzdK55TWqkvQ3wGts9juTa1AX+r1Blp3KeOsYfZQe8bid\n5k00RXl6NnpdGoyEqT9wH38B4URIcF7juQ5RlA4yPnllc1gW9alQWqLTjfzK\nsxBOKaU4RMAefhUNkGL3kiBSEUdjWLs94t7Zg5roaB7pazOV6uar3oGqg8zp\npsfInRVe+wkSRcuAkxhWtQFbQ0lH5I44arWsSfCDIZftDitRVV3KcGilBinn\nZu7H+dNh2r01bPgKLrWIqJI1A5vuG18h4xknWKl5YV1aSLW9mtgPLxER4/YA\nvrL4CR/Q2aBPlyADmfURq4ZZBq5uFf8nP3XvpTl3QIX0hNuEVmRUq8+2AUJS\ngSDNftaIcodCKD52uFQqTQxDiaxGQN57h8xNwujq9YhkaokxKYrKQNzmCkNS\np+sc3AmvjMJLfQwTNmtTowdcyyRLGwsRurhvnibEaRZZYW/xWsg9QwngLSBI\n/4YEMAVHr87b8rd5Q/6sFuqgzg8/B+Mxgvcr8auZzCro8P9TOuEgB2sP3lwS\nHOVe\r\n=SJa2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWXor8IdIlXjhxzmeCH1gPTCsWg1a9zrW3s8A5PFX9kQIgT+z1qZ3WKDGkRN4Z/Mg0UH6Cg5ECjKKfL9w411HcDDk="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_3.0.0_1581574402433_0.41004644051407113"},"_hasShrinkwrap":false},"3.0.1":{"name":"classy-ui","version":"3.0.1","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"3f2ae3693b6a7397a4c804d577b485325178021a","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@3.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-QQD8rpHxlsdjzxxD9knI3nmD5ZSK8skyQjDyfP+6lKXCkgeA3hquHBv59H0vgU/cwwHzht/y0YeoMpNHVV3mPg==","shasum":"4ed18bb46f722b9df50699d74ae677521238dd7f","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-3.0.1.tgz","fileCount":75,"unpackedSize":465403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeROlrCRA9TVsSAnZWagAAwtcP/A9LTnGDKPD2x3mJGNy1\nhJ6jmhOnezeLbkPvqPo566Hmk2NFfqMWFEMFFpcbStE40pxrTg2016b8akpC\nYJ9qmcaE9V48n+vqJoZ1r5BbYJsdVWuhSV44sC7gzbMKRrTtBeX1nR9hLfU5\nUJa8OPHjcZaixFxCmEVK9rjtTIANX74QoLAFq8PYzddiK5MZhw0cc5o+eGIT\njztx4sEV4P85GaSJsmD5p+a0XCXnmcPs7TlJlng8iRu20fBcQXi/28xFNnH3\nvzLPuMaNonOnnfsk01x5owzKk+r5QrRtuBFN9jcJTbMirJmtlXK8w4Wb4c8d\n3H4uYvTL8y1Ie4Py7CqW11KJeF+/t58K5vUdBhN05O9e4lyGCnDKTJI5Dwl6\noQGZCS4QfHDAUY+BkwmmK93qKneiOJ+LZTULFz9srCFRycDn5n4Vd6TS39l4\n0Skiw7kjszG+QAhbE2F67MPPKYoXMZCrd3gISBO1sY1HQ5H0Mi5cyVz/XB9y\nOt42uIEmrv5cBje0mhjnUA/e6q0V6P8PnQMPIsOQsU9cKivDVyTygWz9lYfM\nl+4XGVQIvkZ8X5+mEyf3xiix22udWsS69X+zCMEGsU2B+G3bqRnPc2fDFNdx\n62jkPQKSKMHiAbrirCLwrA1s1C0Az3K0LdqhgzrJLnuEy6ppUZYjqGqFXYFG\ng0fg\r\n=Iieu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmgNuXJofwvox9M6OXx4vZWWYErt5R+dIy7mlWeekVXQIhAN/5JPnoGW8jrzZIXmuCT1ScdirkhUX/Ye0ze6EVpFVE"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_3.0.1_1581574506582_0.24816547758657115"},"_hasShrinkwrap":false},"3.0.2":{"name":"classy-ui","version":"3.0.2","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"9e35e0acc84a3a4aad70656a9f4273e6c60488d6","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@3.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-9QXJKf+81ZR/e1a8vuHrZOJgRxoB9PVNy4kfTfxJotRD3Tr8BGd7JgiU94haKY2f8vS77xJ9NZE6vymzaITzbA==","shasum":"71e71b4819392b9c86218e6deb4a6c4df54c1d7b","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-3.0.2.tgz","fileCount":74,"unpackedSize":456939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSCV9CRA9TVsSAnZWagAADtAP/jOR4ggutrQ6nIuchPrf\nte3xE+tGNQKnhMer/wJwY5xeDLl8Crfz4KaEi/0Nj/UBLLZVpm667OBYv4o6\nfDwRPj7oUB7DNvS9PO0JDX9ouNSvKi8eDnA9U02ZAjJNGPRubrkvHozH4YoX\nnZfB5udzflqgYwsx3uLGXHJrnP37+rcWXB3dwMOVuVCUkppukIvVtE0FudHc\nkpC6UywN2442hssqJaI8dgj+N2LDIjsecUYTU4OFL7K54MTeOdFIhWH4VSXQ\nBM1bPzgFPyWvF8hx2zvoxPKhzQvfqXLH9ASYCNkZfzL/Gd8PRMqv+Ud6Y7Ix\nlt2yvkO7seuqsrTQEIXRlsuN27OsUnMZWZEXLnQB+ErJrLSii/jZHiVqUnvl\nut3TdgqF660GSl3BO+p1HV9sAGRQxyeEUluu9MbWEV5k9uh4XzpXG4AkLJGt\nJMacpwk5/2BbqiodTcyOb9PDPHbb1cJAY0uMAEHs9p6TrSVw09CKbM2cKk/W\ndagf+H6GuMTdd+0hC4LyswdFj73Rka9X3GCuSPEC7QVg90EcH3TZ0PkRGZGj\noLCwqEiIGuzlRKO6ZIn1hXSBdYDTAYt0ZQnzPrPQGhBVTTU5zj14V8IKbH3o\n+5oOJ/qkP7tjiRx2SEVLBK7rQjhUuwvFhoT+zs5nwZalz7oZ6gotSLxYJo3g\n8Q6x\r\n=8pCa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCefbXbigp/CKjWrC5BgapwV2SXNhamCO6tZZIH8VJheQIhAN3IuyxwHDNpyx39d1rMmlKaOuY80g4ALPTsvbcyNSqA"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_3.0.2_1581786493403_0.4091142672784849"},"_hasShrinkwrap":false},"3.0.3":{"name":"classy-ui","version":"3.0.3","description":"A framework for building and consuming atomic design systems","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nA framework for building and consuming atomic design systems\n\nDocumentation at [https://cerebral.gitbook.io/classy-ui/](https://cerebral.gitbook.io/classy-ui/).\n","readmeFilename":"README.md","gitHead":"f2062f65cd34be1076b85e194972723f036bccdb","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@3.0.3","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-WfVQxczmNgyqs3XGNOddeyQbm7/l2xBqnYjp+PKmNymNNse9kNGOUgRdTVJj1SUTK7nJ8bsk9aLlcwkt+GU+uw==","shasum":"11a58619029f4b5c8a93c0d8185e81723efe8fa0","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-3.0.3.tgz","fileCount":74,"unpackedSize":457121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSFplCRA9TVsSAnZWagAAuyQP/3BzvAx2ps4O8dwN7mF7\nBIx1u+anMRqQqxe5qkrzkVzFaY9mh+AtYR6n3QW60WmawbPBF/lAr4QuzRDF\n/fLy5QaJSvHRKK64QlR9HlBq4MCRwkekAi/MntvgINFWx0lLVguAXNzENcoj\nr74/1fK4Im8RawQAYaI9PP9Y1XI2PYCECH1JQSp1YcdwOoNLYDVXEj310GFn\n4wk0YnB7IhaECYhpupVWIqqDU+ReoNAaCKoffoNcCGMIqNan+EAFxwc+HvqW\nZv6zWrLovkMiqd4z5TAbvRGrA50Qn0aF7n5f7UmOtFhJdD/B9GmRFpzbrBxo\naiJW2T7CRHPAcyZKpR7IrEDV+7OP2ntUzRyGfZQFZrkHjx8ERSSr5QfkBxLz\n/v2AV/qly7R4go8jQxL/xr/zRl3Y9txkjBdQyWDjHEVhhy9lJfm9NuVw01Vl\nm16bxTFsB7DZlDlQ6qQmjdhjC9eREFj5iro27EYIZJ6R3bsoohc6/+4gM/Ax\nS/Msaw8HNdQ7mizt9yLDN9IF7dPEPF7W2CQxXqqjLakIihbtn+xmN2D6NYbG\nBp0kv0oPSXp3BJeNap9uWYMuh0Di///0nXWLWFXWRU9VOK/qxwayOtuRc/C5\n0U5nIuVL8MzU/jcIWeJEJnM9Mx3NGyuCojKMHKGCwd+sdaeJtSryzIIFgXB0\nEuD3\r\n=kWVs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ9b7GZJtzHN1+nVYXvlon88jqRjzSpp2eogRz5PwaVAIgPkaTbmP+KbYChckwZ57OkAyrVCvS5iiNmWW6pLAg3fo="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_3.0.3_1581800037309_0.6480785556586557"},"_hasShrinkwrap":false},"3.0.4":{"name":"classy-ui","version":"3.0.4","description":"An atomic design system inspired by the wonderful Tailwindcss","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nAn atomic design system inspired by the wonderful Tailwindcss\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"af5462d4c0736b8640906f81e7b7cc4935555714","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@3.0.4","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-1t+HT5xQuwIAXKcaxLDn/8qVU8yKBvmIjGBox9xNJUECRLqsVcITtLNbgOIjy/HIe8X1KrFXJWxML37lx/LCaA==","shasum":"8e1d91702e024a56535dd9b541df34c1875d8231","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-3.0.4.tgz","fileCount":74,"unpackedSize":485623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSQ+bCRA9TVsSAnZWagAATpoP/iZdSpZxAROyZ7kETsaR\no3UCvo5oVsvT/iMm51SZL4zX5aGd6fFOwvK0pAsia7G6fvWgU5jd24e5Wiio\nYaQkmt2gvkdPLslXbQc4yc0GriRcjTHw+6hrSsL4OyIOrnsGJgD2LNAzmujc\njUAcS+FHQ5iG+//R2tESQm4OuwfS/Unv+qdmJAuT8LUXuD1cZgzLpdaEyWuJ\necoH9+4SJLF1EeaktKsLRoHYI+lCw6TazfpIWGMlcE0Bgp2RKap0csRdIGBX\nBVMH0/JNqBbfqyGL0a6O9EmXuV9bf/aRybTkxEwrnyy4/a1WA+ac2tKqOIvX\nq3IW0TRU1uBIyJq7wQQ3WpO1L1RY/UU6WHTlIWM5PgaaQ/QgT2rlqgwLjpS8\n4U982+aNtQy1VNgcfxBGmWaAyNMBqieVykAn3ycAI4ir503GH3d5d7wpW+YV\nSXeJFfLdShXpCSjhz53lu2N97OlF2BEtNTjO1GjFniOHDq56HPxyGwtKb/YY\n+SPou3dVlv8fsfiH4Mz2CkkoYPwLIqjZWqRWZqokaOhLO5+67VHZ/oqibHpG\njGLTwBEOEtl9hrHougFvFzY8dBEM475kZGSR8v45JznQK4rA6jg9iBpiF39O\nXYcpXlDw6CA4DIQYAIpJeq67WVak4UkaJM7ul5ZAuDn9QleUiVYDPsCNNKHs\nVgAN\r\n=J8xc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDexyOMX2byz8JncOV4BPpLh11VqnAKPnb3on2wZS3FlgIhAIvVIpYTnsZEh3854wrs/UHMQS0OzLyqGLiVu3n/2hLO"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_3.0.4_1581846426742_0.6928314987456654"},"_hasShrinkwrap":false},"3.0.5":{"name":"classy-ui","version":"3.0.5","description":"An atomic design system inspired by the wonderful Tailwindcss","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nAn atomic design system inspired by the wonderful Tailwindcss\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"af5462d4c0736b8640906f81e7b7cc4935555714","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@3.0.5","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-v6Oqkf4QZFs7nXHdiyt8k5p8qN/v6Xzguc2w4NDNt829vi/aWsNEq0xSOMOrIwYUievoBG2jEmXKXvSKy0hCQw==","shasum":"5c24255634936c2bc34c73aece591e1e9ba4307d","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-3.0.5.tgz","fileCount":74,"unpackedSize":486943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSRmdCRA9TVsSAnZWagAA9HMP/28+JlYrtiQMQjVz6+HD\nPW0u1bMhUC/CKJV0SudErKwfZXrpuUmg9Xy4Bu95eiHjUmDqprq0BPr0cShf\nVweS63plH9RSkL8bplG8JXx+37TuPD8Jk3qTkUDe7dQlTB9AfCWsa0y4UZ9e\nt1YSx1kJvvku/bEymuf9KRBInla5VmO8862KGMLVPCssDuwNdvDWBPKeO4mD\nBc1NJLoyoBDMeuRi5raG7hiybts4WQGSaZ3r1IujWYk3zkFsYu1HB1OtKK5Z\nBiernIUk95PzNPrhGXWU49fJ2H7ZPjUzW78jcADIrINAlWYdOrISa0waXj9E\nuH0hy4xTrEU4HYoJu0HsJvdVnouFVW7DCYKp4p/RPrKFIG5IVJ7VDGHJgYK6\nwlY5kdCyOKogHfbFyVN2/DFPowTCiTLGFxnDXVzcNHLK9Fklbbyruf07IR2Q\nTacnyiIzmfJ99RtgZEttHlvilVDU/vz7UDQfD4V0O4jPc+/hExGqNLSVXQLn\nX2f0wsVyriYdVsai/PEf9XO1qN/2LWqfFcZ+qgywURdrMkVGmjTwvGR4SfYD\nznZOa+CdCfQD6hLTDXanY3rHiLVRBnir6MC6WMXbOvC6JjVYwEDmO7cENtYe\nAaQ0IXtEvUspGsGffXm2Q1+1tPgf3nBqDtj9CfHL8jwCeKr0ARCfYPcsMILU\ngMQz\r\n=bwsA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhLeTGqZHbtjoSW3j/O7Fxhm8CVpfmYbOlxsluf7U2tAIhAJc0BzpwYh2g5wY6+zD4WWQyoDlKaZiTBsD4TPP3zOQA"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_3.0.5_1581848988945_0.28368232494673973"},"_hasShrinkwrap":false},"4.0.0":{"name":"classy-ui","version":"4.0.0","description":"An atomic design system inspired by the wonderful Tailwindcss","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nAn atomic design system inspired by the wonderful Tailwindcss\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"ff93b6cce39a877be00df3d65ca105c84b5c3eed","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@4.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-46OCAcUIxYxMhBxMRhYKarFWtF2AzTwf1MQtm281Y/p1C7959lPW6uDOoR+BoUTj1UQWKCVZB5kjM1KmrFyjUg==","shasum":"11df9a51a6b56d8aae705d8b783e1257fbae9b09","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-4.0.0.tgz","fileCount":73,"unpackedSize":472314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTPF8CRA9TVsSAnZWagAAhwsP/3i6I2WuyPP1P1Zj7/L1\ntyb/1ra0UJN05MKTm4aGtT+b/fuGH11RXuFtzrwS8MT4kxHBk2QvZnCJN9RM\nGrfa13SGfYPiLAaD5Btf3eyOyyucJpx2hoq4NOX7AFF9oLXH/UqyzY6jJq3R\nReQsoQyuBQsawo5BZYS75acb5XemPkK+vNC1AHf0XvuziwW7obgaiyMIrbcX\njGU1IcQNOjWljpaJaUScILmkHK6FK+iX/M7NBj2KB0uGWv5/koZqhvjxQr1+\nMEiMZlqBjgwSeMzi1jcdOKpGKaJwzbkH9rflIL+W1NN/dnxaBPbnRGRhrg47\ngaCVs8sps+jf+4YZ4AVWIEKaxIV5AMTMV0fBDQ6CSsaDxhDJuzOeXFMQeo2Y\nFuSNqhA71JM/oj8iHK7cmJ0WIggkdVyNpD/9Fn+cXzLnirRkYyqx31iCaSx/\nlG6/IrVRkOwXEQrlD5Pgzlc4LoS2gl4HFNtem4W8U8qxrgBa11B56lbCK+Th\ngTKWXWn15Wwp8MdshhlQKo9SV2E75z5spZQoPdQ/1XDoytsWKTcV1LE8DpWg\n8liBfbLgn/4JaBEqXYYM7FOpE4lISTmjaa8/qExl4gNp4MQIcdPMrNm8BUbA\n5MHl7jvk0a6hI/zciMyC2I9YWOeIcZ98rYgxAlxYDkTNr0683Qnk7edaON6/\ndiIQ\r\n=nVOQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgG+BlJagUOcnzYHGdGmHQ7yRDCEiciN6yT9xzpZcudQIhAKXP533rhMLgR19BgX5wmTUsaIDmLvcFNvcT1iwC4lzq"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_4.0.0_1582100859602_0.949163840441861"},"_hasShrinkwrap":false},"4.0.1":{"name":"classy-ui","version":"4.0.1","description":"An atomic design system inspired by the wonderful Tailwindcss","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nAn atomic design system inspired by the wonderful Tailwindcss\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"085aa4efae8ac725ce5b480bf3ffb2513a84afe9","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@4.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-pi1ipp8KMLL8EcLirRrXsbPG7T0B6DFyke5SqcT/KQeXUd11P2XfjzHH55bUXTv/jEi2jBznuTTv2nojc+DB5w==","shasum":"cd9ced55e66ae0ebab7af41dc6814f8155150be3","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-4.0.1.tgz","fileCount":73,"unpackedSize":492485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTXkdCRA9TVsSAnZWagAAhEkQAINFAiDCway337rENywd\nPA3F4sdQylELhb46VcYncmkaO19MWzeKEBbVbPNOzskVXptvEi2XzCYqwkjd\nIew9/alXKZ5ZoE8LLYWBmvsB0awmA/xOFcRppY/q4XXuSTdlAFxHJ+cG1vwD\n13OnVr16iBH2cHXzTvsOYpR+qEJQu0a60kCeJa0anSFL5ZvP5EBVxozKnETq\nwW2GchMcr+l3KDvTQx/MUpt7Y2vD1epjL3n1xlwfdkn4CxtXkdyUmMq2zWMB\nz0z1+tcsXVOxwNYkd9A4L44vHwyhkYsUiGVcjy4NFPN/aUfjIET6TwRwM0fh\nZsL7i79lSTUaeAf1Sz9M1STxvnYc1tklqzymxQn6HF5RNO1wwtGgs3cTq1UB\nrRubZEDiyZCyAeXqlu3VIffn6G5+vM6fs+tkufqN8SOxH4zdHfwLlIOzdksW\nefpx5FXRtEFHWhYknx72Q3NyVPCGw6uJgcC38FOF3IDUdfk8vbCeDTu0drbQ\nXf9g1F4MACSTJO9HQRw7a7iMKP+6JkVnW5wU/M4RNskuUa1CXNHo/1Xj8y6b\nNZuWQBh8uz39ivRjileNQoTQbcCKRImd2m7WJAVu0bdJsjWKDEQ3agsJqmeZ\nxWId5IfabFqMJ1/XMuqSVT2TEVy5dN9cUP6w6Tvz8pc8YFu8yzVZfKjW+q3B\njxhE\r\n=svTJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcoJj5AW6MiFDXG67AHTXsiIuuWxMPphA2zjlJ/23o7AiEAgUWX9EQEg18FkO2ydFjyk6o7vJhUNj8FS2suXS0uW20="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_4.0.1_1582135580684_0.9279345799280354"},"_hasShrinkwrap":false},"4.0.2":{"name":"classy-ui","version":"4.0.2","description":"An atomic design system inspired by the wonderful Tailwindcss","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nAn atomic design system inspired by the wonderful Tailwindcss\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"60cd759e9a1565c8b661ca31695427887a3a6cd8","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@4.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Mc57lExLVOlyBGYs3THG/RCTvBp21TB7sc1fT8X/sjj7ultSLJsZtdbBvVGPFeYOAzq6sufAfzgQ2dQuHcCGGg==","shasum":"a2e1451dd19c0a77487c0aed1d67a6beb64e80f7","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-4.0.2.tgz","fileCount":73,"unpackedSize":500313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTikGCRA9TVsSAnZWagAAh4sP/iBUO+829Yt7d/bWBmPj\nA8WlNucI0PRXIvi67i+NFUBq8x1OCpssRqdv6kblJOY9qWfqdv+ULVkQyk+Y\n7GZqCoEyPHo2kdjb58oOmuFtcHOWxSF7+Fg60KPiO+7W5iC6PZjTDrWQs+ZL\na1w/5mVroP2fGSK8j+w83l8/o2wWv/1/haJ+HCILPAaFNYCHTTRQoj/iPq/f\nfziEb0eqny0xClSZNuPN84pq5d/cVzIiAyEyzD/hXvqODxe4JnbeRTayQIDU\nh9NFHlrK+m8FcDttQnGPbS7vLRoM9vsS6GD2enXzZvXuBnuRFyhMIcmZIwUk\n2REHCWbLch9DzUIfPmN1C9nE62ZxEcd/Q/+Z8eC1dZr9M8Jhg02VHm5rpgTr\nuR/sOnVKqvwI169mHqJTcG3tKbTLfgG+JcOXlidL1xmr88X1PsGc+sFj/MDD\nGvq8zskYxF+ZbqW8aO+o+2RnEGwWJmGQbnR/wVK70cufphJ3U5S1ip2P3Y5u\n8yXIuGEWAqnTxNdmBBxZLkzDN5kj/84mH0OHS9VCsxCepS4WJfbiCYpjkj0w\noXEFrtn64NQmZdN9mlrfOqW6ta023MrCNAImKFZPa7+tbVF/+GwhZ/glVlO6\n5ydb/wz/BManUkladlne2gNhV1XClW7LkYH5aqW6IZ+9EJkOXNWYFPCOOtDy\nPjm6\r\n=NWZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIvPaBXhV2YCE7we2xXA/E16nntOF91pjL7ndFEmJo/gIhAIzFUERNMi8JWPUDut0vSt8y7ExhCb0l8gOpzcP2KqzH"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_4.0.2_1582180614225_0.12981923552911412"},"_hasShrinkwrap":false},"5.0.0":{"name":"classy-ui","version":"5.0.0","description":"Your design system at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"gitHead":"6d2325e939e84085836527ee94bca5b1ad48ac19","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@5.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-nGikiC/fss+yasnVsErW7lqFMeSeEgR7r/t2c9RY7rYhEs4gm2uNHRiX8ClFCTDueZknhAZSyfjfYjMfhQPpbw==","shasum":"44c9db57cb84aae03f5d5e2a6a0ca3157dc7f71b","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-5.0.0.tgz","fileCount":73,"unpackedSize":1281864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVAsKCRA9TVsSAnZWagAAW7gP/3T5xu3eckp6BiS03Q2U\nAOjtaQ6CA1pux1A1gFW4zD6EvZ0EGGr654fcdSatr+u5O1/7D3ay4v13enfU\nu/I7rQDdDsp9f2pSoB+QJHkHsx0B9LFmGzDiJoPeb0y5YpdgXXh3AlqEAXmF\nI2P0LSoI3gp3kqwA11zMWAV7kSNSHmVYQIX41oFWMYX19PvVsoAhFcJFfLRo\nFa8n3l460lKocSdBU3TfXULgMwAHat8OzxJRbtlQwQ9aGy8O765rNk0reh1f\nOuVA5NK43+Cyqirsyr/2kvsygxLGKJ8qHfThbwP9BIZ+ByLcaoe24DnlC7u4\nopk2g1MkFAX8fyCwkYD0d5J7TljdBTckmMJeAgm9VSKulTn+GDrWDsp9DZ2f\nQ3+y232NWX/xYJCaKdd9/KxxH58nwNWOQ5YEM5xmRLryvW+QAGZKriW8Fi6S\nldQMD7SkevB6CVgk6+o2dYAI/HDAaa7ocNqHVog2Hb8n2JwyxHUvTG/kIrBW\nY5SF18IPuy02UUNygA6avKtltGuJGYFQkBy8AvJCWsLfs3NqCNy2M6oJVeht\n3KLqYD1+Eip+fym315IlGWNNWtWIzavt84tj1gsNHH+O2CHriPlkeZ/2mfhR\nNyt2fwDsU/QFdbQFrsSFfPyh7xKlIoqeMkHRGi9M9I/AK4S6yI+rWpkg0QeZ\nqIPJ\r\n=vMYn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaIJvuZ7js4kVSuhxtgZEjFvjdvWTbhb+Mw+m/FcVm0AiADgWWV7wY/t7/9bWRo1E7y9FzWr5gXcdWjqCq3K/Iasw=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_5.0.0_1582566153685_0.7661903900912903"},"_hasShrinkwrap":false},"5.0.1":{"name":"classy-ui","version":"5.0.1","description":"Your design system at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nYour design system at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"49178b93e1b7b90a9f04bc009a257d277bb0f9cb","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@5.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-NGThRdy2cGd3q5KIW7CjxfygpHaWBPs4SqyLfaUgwa8RsYJQ+NLzxPv9bL4rVGwYhHsYTzjzVyaI4C0xP4e3PA==","shasum":"77f90ab1acc8bd15e66ab8b2b4df54a9ad06c4ad","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-5.0.1.tgz","fileCount":73,"unpackedSize":1283242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVA9zCRA9TVsSAnZWagAAIPIP/0BuIPIKlAgwUX3a5hZZ\nEaqod0yXMVJ98T8LfxSpVhlb0IlkIL5EfIq/2MY+rwxYHHEbrGwPU90E85TS\n/naXrSTITDM1SpRWaJl8Q8YhPXQh7gGxXIzD5gxwhSTq6/2SJRmQr3EP0043\nZ4hU8p0T8j0XBxMzMGZSj9ksGtj1D14gffwy0mZuGO+QvweFqNzXmpRcv4Yx\nnRI37K7HmkKr+IjmRqRBhTzho0LZOoXMSokQCRmzoj4ConBPsq0ilEIA5uc8\nN3mOa243SeFn18X9L/mhV+jjcaxvUOnuC9O1+HDwel2NwHPdfbreajMmi3Kq\neOqKSQh+MkBz3NmOrKGvICxuTtKBw2icRxG7pmchZp3cifu+QrTN9M4DcsG9\nbNYkAhjVYpQI2Rl4mi6rlU6oMy42UPQKBYLTbDGa/fZuEz+XAFGFFerRbMJY\nHvmMNsiuAJLO+E+Ik4JVhTnibS6CaMJOMbezVaMv9/eDJhA9tWrx6Vk/znuI\nNnTJyaml4BDdGUhmD9ezt6aEGUHC+eB9UUBXktQR7ioVWsCiEUoU0h5eZqEs\nWYpuZYpC+zUo+FEq2xyqYPF29PxTapw0eRS64WNGBK+gWVkFEu9v3ZozKddp\nBBTPpUfHFulEzfQ5jeNc1pC8Jp2I/zY+OGU9q46W34RvwHbo3+n7SpwTnpws\nWNjs\r\n=Aoa+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE84EyGcqhpYKRUDKTYwSP7/QWC24YYA0VB1SFeBx5IgAiAQjQw+YH2cMnNzJ8LGIjjTvjMFAeitseZBgXk66fveOA=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_5.0.1_1582567283372_0.3154910444499257"},"_hasShrinkwrap":false},"5.0.2":{"name":"classy-ui","version":"5.0.2","description":"Your design system at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nYour design system at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"74120f5b0314e2d72f931436b104816951b9ae70","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@5.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-+G4qR09F1UL/X4hs2eabo33tBjjfWEOTPOGvwbdy5+FCPjMVOX8zbRqYadp2P+HIGEDa2Y1ONnuwQQENR9JFkQ==","shasum":"c64f313213a2f83c7521fe6e3395cf18f1d7e691","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-5.0.2.tgz","fileCount":73,"unpackedSize":1288062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVEAACRA9TVsSAnZWagAAuCAP+QFrHL/KXJk/KsXImabB\nXJZX3ZLH4Abz3dB2YLGjyukeLw7uubZlq2E5HMIKPv3G2rbK6AZ5Cz2yEbOM\n5ndU8zLVNo+ygXX8ZGHGavOrd+wVKPQAk7R+1KGehqMcJaih7y92Pp0h2bAT\nNnx99VnNkY+f6VVZfBzWyuL6IAdU22DHefNGuGKfFqgt1vTppLsuSVHcFvFJ\njpEpKQPvp2Hq/vrRtyBgml/sZI6kzrDVpA4g25VYnI884/eQvUr7RKP8sClV\n3ytE6tyqoi/HVvYsul03HIQk3loidNZqElSZIhoX6OMXEua+ITpegBC7XI+2\nJpdjIbqIMnvSrxl9BH7kCVHMl8fi8M0iiL+WWojbJQA9c7vlz3rtGyncE485\nNv1MGB+UqOetV8r98kGPfI11Gl1T2ieuNoNBMbNuP/mNedKXXoC82/3/ibRg\n/C3MyEtALPBZKxX2ltSoLPGtKZ02+V1S2pszVtLMdDdIhYA8ra4D1ZdjS6tD\n2YX9xQr9W/0Ton5QypF34/LDawTsbTl47SDjsf84xpBk8ts2YvwFlTJs2Xfw\n0GZaEckGPjWnQK9CAuQ+mgY/U2KqWpF5hsYagKL+d2IvtSg6lVNi27vPiI1F\nH0UXetLourBnWFLsHqngKV4QZbPxso2yCS2rP2aGz342A+OVvhtXq6+O+K3P\nfMyD\r\n=7UcW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfYTqhw2hnVzkG80XUCQrwUwSxIxA1SqDB98XYetWnPAIgMRbXzWdBRq41Nu/4ohVPHb+GpUopg544gSR+fykAfk8="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_5.0.2_1582579712432_0.7056869292366597"},"_hasShrinkwrap":false},"6.0.0":{"name":"classy-ui","version":"6.0.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"ebb540f8936d304f0d4c9cbead7675970d4ab61b","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@6.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-tecGha66oNwBs1pnhSS++e0/JpN5Ee+LkLuXkvN22W3jVvbFLkFaaPFdRdHewJ49dCAUQoIFJVVDS5rc8VAltw==","shasum":"d11ab88aacb4660d32c6b959f468557fa06a7b70","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-6.0.0.tgz","fileCount":85,"unpackedSize":1356406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWBGZCRA9TVsSAnZWagAAtecP/iUcS4bT30NmSrVoIKYM\nH5FkiDB6uUHyVy0A8iiB/Ea8iek7TUqGuMKvrOsQ4LhHnFfzOfm6FrzwdfqO\nMFcu8g71Fs8Vefp8Y9HfT3vBICxGSuWGQl5K5nv6j2NQQuTJ1lVz/za4oCVe\nB7dvi7I5RT8eyrLtOdy/kkBjL9XZU7+pJmIIYgRVBxasqWlnaQjz7SZfZp/Y\nO1CPPHPPOc/zYcgho2A1o/v7zuFjB87+13UbBSRlSA1leJbm1TsmEx28D/2O\nFnqYBIS6m7EPuZFYalUFnGR+5bYkGljm4Z+W1c+byuQQ21mgoQr1erVKAAdZ\nE2+oRtWI0KGvdObskuJOfDsrZ6GrKgeed8Sen5goCW7PFyVhtJhCC+G0lpD6\nzU/xRJIKRkKkm+i2cyeMze8X1IIpmM9HD2RpZOJ5YZ74ISKtV3kPqBdW1ek8\n6TbuC9jCZkh5zrSHEQqTPpL7FPbXKmGTHsJ4b463vp7C6Co9USxKfdycOKwG\nBFIUe2uoWbPhJm1U/GpaXqvQjwwaeyMjJbE2+OkWwcy9i/G187hQwU9YxbH1\n/443RW+hU/51NAJh2c+mgjmhYmvx8UWpVcymez+Lr5GCV3UAfv2lFl4jF66P\naMpOcnNxnjixBDu1lX/gJPlvIUmkDkQU2tOhyfHBSUhnojqeYkLqFArIfpKr\nyZy8\r\n=YsT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtJ2eYcOL6ReCzl8WMKtMVFmQfklZVp1gMxa6U0VlXUQIhAO5SmNzMq8S3mmVxZyyReznUPwgV9LBG1YVkx9CL6iJB"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_6.0.0_1582829977163_0.4149430506979208"},"_hasShrinkwrap":false},"6.0.1":{"name":"classy-ui","version":"6.0.1","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@types/node":"^8.0.0","classnames":"^2.2.6","normalize.css":"^8.0.1","reduce-css-calc":"^2.1.7","@babel/helper-module-imports":"^7.8.3","tslib":"^1.9.3"},"devDependencies":{"@types/classnames":"^2.2.9","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","prettier":"^1.13.7","rimraf":"^2.6.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.11.0","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.7.5"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"b76d3f71b84e47b913b79fab5affbee87c5a1036","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@6.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-fi0mawgftXId3bJdI+kgdtG2Cwd+o6tQY5+8BCCDmnO6VFEOSSRROR8LO4myB6VvSHa42dGBLrtI2sp4kjWNVQ==","shasum":"afc2b19c52c39af298a51a3c3aeb99b72b75fd29","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-6.0.1.tgz","fileCount":85,"unpackedSize":1398020,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWBgFCRA9TVsSAnZWagAAwdoP+wZSZJRxpVdIzT1JDrk3\noMBkXF+RgihzFA2d0uIFzCg8Wzs6+o//2ksWaddRa0Zviq3wHHPn1JaGndPz\n/qF8FVTTlJqFN4DFKBNOCs7hmJs+YFf6/wazOoZI7Xkwd0zi+GAgIhBIMQVq\nfxyMj24VD9DZK+ZYkyJZ7owCg+qSf8OS1pIPvDKJjnmIbPsywPiJEW145WGT\n7dKzZUKbUpxgEbW7Tq00gZoqVn27wCAo47SV3X49DHzSDdPMw7RxrJRIAPwW\nQ3v0BWzvBkqkXECGIjS7f4uHc1zmMOreM5rGa3IACwtr0nkRRgRw3TBZIJXG\npGPxQkoi84rhDhd2YrRppYPAFPxk9WIggq2HzG2hc7Alp+2Bf8Qs3Zu6Yt+h\n4/8lsTAt68ijdSgDcrQEVQJdQoxU6YYnpRWoWTbdZWDlDq8W6Kn8k+Aee+8S\nmFL0bUW6v14f2CDBs5SUtQKIM4WA/0XTLNnSE+Jf+n9vkV5be+Zd4GPCU0KW\nIFAsUWNAYgUmzEW/l/mqSE4Wu6vQZIEfikXoQFkGw7MpiC0Q72yBn/LO1TI0\nUW8dp/xcpf5iXWnDi/uJXe7XgdvYCv3WVv69d6k6Iy697PyWFJnIlMkBtHSk\nqifOrNyrw009eSy3IqMKsYE77MerEUVjPj09VWZr3deJBG7HmTjMoND4/P7w\ne+ri\r\n=D4Fv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSTcpCF1TRdIjQoslSFWIxyyOmx/IDVdWQ1L4IUFC7hwIgfwM5rCl+6RNIG6PRse4hWPAxDWGuKOOMVcqeFJWxdxU="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_6.0.1_1582831620850_0.6614811559765272"},"_hasShrinkwrap":false},"6.1.0":{"name":"classy-ui","version":"6.1.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"be5edaf0ac4e75175798bbd5be2f23ea63fa0c72","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@6.1.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-ZJXmHFFpniv1yn2ov+xQtbs+G+Jw0+u9CtSUDpYaJrt/5MrFoSi2u8Fddo4QmoenTM8RH0AyrXwPagRYm0zuVA==","shasum":"79edac9dc3a2aada031401726359f06fd48e911f","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-6.1.0.tgz","fileCount":85,"unpackedSize":1398847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWg4fCRA9TVsSAnZWagAAbDwP/iSVYFfNLl/d8REIzchr\njab4pc8RL2hlE8u+zuj7KQJ8LPR5qvE8NBg2UqyAgDP8zNH+3oP+uBfhFCN4\nCzHs26CnE7g3aAsws7meLADACqMbqUTBo4DwNcnzYYFezv6sD8+hiYRYVwSK\n1M4O+n9ZmZfqvO0gHsjI6XJqcg8XQ0AeaxWeFcBS+glbC87MmvaqMS+o95Js\nVcIoSflQgDr21FtegyKZATIEIGWpEIpk852qHuhMMf5BdYU7k+T/SBFQLU3e\nI9+Zcl96u5RCs/blMsh7WONnuxiW4cVVwPG2LIwNkELM2KGT4lL5yEkHRiRI\nUqYW0y+mV2KYxYZlAI+Gg0ZCSCX2TYBHghH9VdYlvqhiduMxdqeuuZmYwcbz\nxLDgS2CFAtjrddXLO6bkx/ZY+ki6Onq+ikXzDk0HV2bgmQ+dojaYPfOIMbi6\nLiwAro0AcE+326u7a2tq4k3PoMp5ifNgFagjClK0Uh8Q5CLKZ+emtOXD45An\nGLNbm1hA5SHNiUZKP/uzeZJGrN32DtnnPjXDdUbFsy8CNYb5r68xtPGoY37W\nFlF47FVXbmwa+VQWEAZ/PJ3XZZy+A9vgk2h3BMtyAzAvIxuJXcFq49J+fOoY\nK/fSl6NhDgpuqkpQAKoR9dumx6DA5YchA9gBADPlAdpIeo0OaTEBOl6FPqjp\npVKo\r\n=/yHj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGpYiDMSyukVlGfI7kc7LoACXaM+u65XMOvpsmobRY4AiEA6AkWBhkbawibH50zlsomTStMxi7YgCPtu7zxAiHegAQ="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_6.1.0_1582960159253_0.43763839450560327"},"_hasShrinkwrap":false},"7.0.0":{"name":"classy-ui","version":"7.0.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"be5edaf0ac4e75175798bbd5be2f23ea63fa0c72","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@7.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-onPLQYKScBj48rkqFcvGVrAUbFefrSnho5earh/fyrPHcMg2HnshGEzok8hTjbfKkF9Eu+B7vX5T9A1yNojxwQ==","shasum":"f89c83de5f77e89dcacded849d85cdb73f3dd432","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-7.0.0.tgz","fileCount":85,"unpackedSize":1398843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeW8vgCRA9TVsSAnZWagAAJTUP/i15Hbx6uB4kHRklPRt9\nQGbsMoLUvAKSXNjtFew1+U2SNJvSz4nfDlqjzQ2ddDt5xtSTi/IB+qNaKEy0\n6nWPRluUz0ouYHdaQ651eLGuE4fzFUfNDrbEcE5i+dtW4vMVSKzicEkH1H+N\ndVo7WjVW6T5ZRjk3zxRgQf7zqEfB3t7C7i/hcPeX9lXdZUEhHy+US39Qj3MH\nh1JN6KJrMsCZ6OwQf/N9APLq88sgkhmXPpffs2rtJPsR3fdfKaRxs4/v3HtU\nRnbkd7qAyEjkGcZl0u3wGMOqCZv6OLazd3Og3CKX6Yk/gzIoJ2ZIaeGd5Zbz\nqzCPzOwxcyiSjaet6o1aLpnsMde8BIxmR0i6fb6zqKaHfl7gjuIRKGP5TWwS\nKwWVKR8QP2AE9fvvFKybY6IhlXRbM7Lcdun0daqkYNR+4mKv1qNXSCswnWSX\nvMyC2ASLYLhP+tk8TUI7mGwNxCNDw5EhuEOjOHXIcUCZLP16UNvbK1+JTUqN\nKaDj9JnE3bAkJKzjEChl7VSfdBLIWWUuuG9BPzOkZRCwEjZ4iNUPAUCX4s6W\njsM/dl6egQqVNBtg1WJSIRCqm+RLxqgLQj3XrdzYPUGbM/v9qjVbh6gSeGhT\nVZM0/pRSJg93pMW+IdI75eVEnpZb/PNXhwWVd63HFVFnKkVlohvjGSLdzXwM\nNgpq\r\n=Ero8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHUy1OA1NZ5HrjoIDGCD2lIQEGOZ4/z/PxAtuJT5ckpuAiAoqq/YSt9VT9INKgi42yCJy+e4hg4Nr0B2hBXHZ6kNzw=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_7.0.0_1583074271775_0.1124942565712066"},"_hasShrinkwrap":false},"8.0.0":{"name":"classy-ui","version":"8.0.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"c1cdf338c59b0e8efca88296c4e4a5f81fa07b28","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@8.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-GYVTxHOK3KgYRmifxgzCPZcuEErbAfbu74/jMoHoe5J8rHN0ZLfJPGyjmHL+YWgJECf0FiACZCn+S6AT2x4Pkw==","shasum":"3ffe13333d8b02d5ff0fc7a62528085641aa8d56","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-8.0.0.tgz","fileCount":85,"unpackedSize":1410848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXNNGCRA9TVsSAnZWagAAY04P/jK3/kEZJhw4Z9I7j9I+\ncw7/4Ks182ZeNYjLWDc1WAc93LFwpk9z9Gmz7tnVUOIpjKiEJCRjE9mF+HsH\nnhoo67fPwlEBIbAMWu+q2DOErMjhuPQZWeAYPB52E3uh6+J1oZitIGOVtb3g\nCwYKdeat2UXxUN4z+1E0vxaBaKRjdseJV/JW6daq9XnyoLdJrhR4dUQH/U4x\nhhpTEeDNwUsxN3TWnC5flGlnvHS/yFTOaPi2oH/EvjfQX0Dih3lUXdu3sUiI\nAoHFz5onLD1OC7HL0qnU5kCbwurLowFApgMEkJPYtYbNzWsFT6U88Ba9LhR2\nEX3nfTRAEtXFc1rb0+qw85Oco6GZJI+oST6MUARwCE7hT8Ehd6Ue4lNK0t9I\nt87HPv57ya0Y1d8Gi5Kc5XDDo3fPT/B5mLGW6G5GHTgn5zCal4RU9fyvwro4\nIPKtcXGElAnvn5i9nuBOWLzYTRCjjJy12BRuJA8VTj0Ak3huGtR6mzBUzDYB\nQOpZPIglR9cWEZmK4szt3iPAaVXh428EEx4y39g4BXrbgKUrTx4Ax8ZGG7Sk\naJvnTYi6NIRm4HP8LLS2X/nGtDQjWFvYf8gL0Aoz8uM/v/SzFv2I+D2+Mqsf\n5XjBmQwYk6qCu3t6XJpuQB0TeH3U9wF2yKQhFGqJ/6ExpkxybBXMZJ1/WPON\nvC7o\r\n=Nvqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChfdET9i15W3bzzK0qx47In6a5L1MdQCUFdbIwI1uNVAiBllHsisS6n0Glg5BPU58Lts2q+XNZc2a3aprsJCpE/9g=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_8.0.0_1583141701418_0.2532475075924674"},"_hasShrinkwrap":false},"8.0.1":{"name":"classy-ui","version":"8.0.1","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"abc7ba0101d26674e140be077e74567e62b2b2f4","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@8.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-WMMR4Qkf5ghjKWcvb7bh9zlu9met/gJmjWcgAijVrzOtkdsAfP47TlsKKZQKveeFtcLPGOa/p+hM8uoC+V5PdA==","shasum":"3ae654c5a7a3dfb085404f19ed5ff7f3687c4e3a","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-8.0.1.tgz","fileCount":85,"unpackedSize":1411002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXNcICRA9TVsSAnZWagAAf04P/RN9P/uQkA/y2gJJ5k01\nhixeW3g4/BuM006rrPgFFZyTZl50OaI4cZP9Vlj4UC4x147/xkFYdUTc8JHM\nq+2tAYH8NxikX47S5D0M6MginoxoToMvayAYx5+qTijFJGr2ddQkSz3H1S5G\naY1U0gDoP6w360rIPaR9pNAdIooo6PTnS7bvlgocH61suX5aK2j9L9b8E8cg\nn4Za7dDs+rEJ+5kjoRvNJydrrbK6VWm+4iN8eSoNUx8jljvq8fjqjjVpfp1d\nP3KMhJTwmzlJ2lX4aIOYyltuybVbXSvybwuEGxB7A7pSaKLVe+cA25ykG3Qy\nJZuSDz8tyFfeIiZAFBnwwTUX/taeFfpRNEa0z34baW6gJQCIt3yt9CrJw3/N\nDSGqBMH2Nl1GfOMQRIzy9WNlZ+pqmRQ3ZjE2UPZ3tYFkJrCXjt5xEtGAJmNh\n1qPXny6+M8X9vuRQ452PrQbjo44Y0KHnKlp2Jihc4GRZx0KyYVK2U00qKVEu\n9AxOdjZIiWiFGrU2Uo/hDU3pOYWwHx5vP3rot456XOmP0FYfrXnYv8lm+UoF\n1Pe3AiT28GVomynBpNzQj3+LQaAMl3YVqxz4vPPSZa2sOI9MqDXIkgg3XiuM\nhf5viuB12rITMyVJ1s2jdBR/lbkIVQguykacUEbbLUWgT/mPieigcR/y13i4\nxgk/\r\n=7lkB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcC7Fbe/xYvH2p+Yo2KWBwxIXFXtzHdTNsoYmAFoMuFgIgJLMyGcaoPMqYHLfcOy2U7ou46pk3U7zFEn8QtiY3KFo="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_8.0.1_1583142664244_0.9571294902013974"},"_hasShrinkwrap":false},"8.0.2":{"name":"classy-ui","version":"8.0.2","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"dc66feb08ba0ee4fd5f375e51cfe789fe5243b97","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@8.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-BCwAhd4iRzxyWHe68sDxw5qK9V9uEA/K0L6Eh7KPBeD8/ylAqkpO/sQB9LqYc3X1X5n2gQwV2ipJpoMAYhZprw==","shasum":"c75350614397ba3b037f406578489e8ed831fff8","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-8.0.2.tgz","fileCount":85,"unpackedSize":1411056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXNdGCRA9TVsSAnZWagAA3CMP+wQEBCgNZuTznfvQLFxP\nFqGQuhignwu6WoM459Q8UUZsYPUkVrDj7VKqVjZp8G6HDOWFoLUKYxejixNO\nx604HRyZkWr8lJ2CGqUaIfzoqD7qW7jycZO5k0TpovkKqnaBqlg0Je6AauPn\nQDEoT5JUklnXxc2HCdFGEBEoeK2cdOp6CzMJnUt650aCXQ03BEjlEvLDjC+T\nitwz4Kt98Oug7PFO4sLWXi/W5KMyuV2wdY+pVtPYKH1I2hpwEFaQPeAVaGVo\nQbZeaTpJH4OqeDVkXDvuT4a7yd0dhi2cp2xb0jsz1SiHtwxwqRTs8HSewHmb\nv0gtedMJpD3bOrrYsWsQEzxkG16EfDt8UoJAblDDthqyTsyXiN7jduHpQ7Yb\nCrKN1Sg18FFsjqBT0XkCPuC3iIcA37bKGKKTQGhZR5D5gO+qF26zfWsd+730\n86tEbcM5a0ETE1VYFUtJYxdaERVj2sDTx37vjTpiC6VIJb+spd/svP9WJ8Hi\n4YdBrbHMmjiP9Z1AW7yjMUcBZIflQb9+VqvS6eToHykHTgYFpqWgZAD+G7oD\nSdu57zvuNbIbJWFRkRBtgn7KNdcaRpivB8xnE9A+e/M9xxax27MgCh3ypvo4\nAL3uRpEBtTJMmoBf7LAInLjfYd0G6Q/NFBagSvaRDvJUTpp24mlJl1AwFbp5\nNvfg\r\n=DJeR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyrNRCndy2TNR1q/JmB9Vlue5BPZqnoWYJZr7Ddh4A0AIhANey8CKsJ7OFQ/ALKWS86cA844x3VU72WKyAaCDpSbCc"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_8.0.2_1583142726491_0.2004226498366748"},"_hasShrinkwrap":false},"8.0.3":{"name":"classy-ui","version":"8.0.3","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"b8b299de41d387ab5c3222a08dc380bb56035204","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@8.0.3","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-OuZxe39F+g8ZTtQfHoIeyL6Jdn3qroZclrpwV0oI4vRzSl5DLKeFkWAhrWsfzAelHaqlU7k+1fVICFuan2QcaQ==","shasum":"0a16aaf390ab28caf6b8738fc38fb419521ee4bc","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-8.0.3.tgz","fileCount":85,"unpackedSize":1411116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXQBtCRA9TVsSAnZWagAAG9EP/iNKuD712EDl1ScFqU5U\nRiijCt+wzp29JpP50Fkg/IbwFQ492q/n3UE/aB4XEJ8gq4c/E68LARAOkEIe\nFwxAgp3skIfVySySKMr9PY29d15wz6PnGfCvN7VWrIUoKhGRffNJkuslovde\nLLbzK4CNWo/qwsYZ4qrUvzIZJdrkFj9wJsz/r8FNnA9ijwicOk0aODPKMUNz\nIiv50z8zg91ukxkgSFMUwzCpVo72ynp8ilp+8Lyx/9AHiw1QOO+r/1yYsxSv\n+j9Wa+SUgxGU2CK5mtZIVKN3ZPss+A6wDXCGJNjTncwWaBXjrBekY6iaCcVU\n5FnxS7Lz9VI48hhtCsLIUVEOaNxZwmKl1/Ky5QuF/72Nzka838jNPVuGk5re\nOVaHiRhi1+JkuJj6pDW1UT/xmXxNcCtnyUtoGXiE2kSGTt16uhaVqvB0mEF6\nWwAKmLwS3CWHCU6eSjHPV4l8JwE3dYbhbTVMbTELawg40VbTMynxBJOALhfz\naLD696S4qF6J0y4icuitKOt4IT5c45+zTTw9mjfh3VSFTFogyZu1asbvA/SE\ndDWGRn9qZubpaZRkybC/+slI3HtTxVBNbqSsDhtfW0//RLCEJKx65k8T3z2o\nrsjcI15aVZ4CaM1PJzZSAjzHzyES9Y8UA4D1ztafHiHR7Sa/jdjl6D+e7nOq\n86sS\r\n=bVTs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFK0+CUekJMJWat56KrDSk2j7XpaDlNVL8P+Bs+p4M/1AiEAyzY5KcOq6TtL0TeWa0dJ2o9WN3haZbVICH92Rx6IzPY="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_8.0.3_1583153261158_0.8630030061038425"},"_hasShrinkwrap":false},"9.0.0":{"name":"classy-ui","version":"9.0.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","babel-plugin-tester":"^8.0.1","dts-bundle":"^0.7.2","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"c88bd7c42da6bc1c56ff59387d8da02f08267264","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@9.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-GGjAhvAmrYpb1j5wSEBkndNeH5/snj6j7vzM1LG3+IibswEgXfIETV0yW8wWWiaHp5U2DtjofVBEsSCjU+2PLQ==","shasum":"e30aeb2213c0604448a25f1c3bedc228ad341921","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-9.0.0.tgz","fileCount":85,"unpackedSize":1416902,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXUElCRA9TVsSAnZWagAAn5gP/RlKeUCvfTwqkYYQ17e9\n6Ip1yJFOdw40K8abL/N8IfLpyV6AxoZnt2u32oAPmfxeNztBr+0b6J/LzYxq\nSOHljIbymlioLvXT4NA7OAhDW0pDZfJtQZtKzYeM6z4UAiiyjBWkUthHTvFU\nK9DeehW7Ev+OfOm5wCJrs3A4lTWqXW9o+HZPh+4RX/vjSdO2he9G3bRIZ37K\nnUkqlAgm2SpD93LhV7D789VWcxCRLwgp6ChPvN3hLQ4TkXh515FROpt1r1kz\nO4MhHap3KBHlBSBS+UPaNIvUEYaHFpdmY02qCDPiABZhzXfVbY01TV4fYBzG\noNMsul2Zcxo5hyaZ2mywwC1nz3lyHUiEX5zfj0kH2mrFNFvzZhqSJhO1ENUF\ndzlyJOtwmSg0vi8P++j2c8dBwr84cKEOJuI8Cheo4HkIFPaEpV3EIJmwLPA6\nsGrlVw4ZFhazvgu4bQLZwbZOx3U00nhkMOSNgbC3HnRN1NDRu/EcvSBxPUei\nBuluREKRZXAwKQyqv80Zqlr3kmD2FV21ONtvp0nHPDDq3CLFGfFq/0DajjnP\npSYq/KT7i/TduIEBJvdYS22ot2pQ7C9uqIPzrJX2TcZSP6+pixu9uHLcK2vL\nSB6jLVM57OvtqvD+pfqxWtbZomlwJJq4P907oQbz/8UpikGg1DkRbAcyMxBp\nV+Wr\r\n=f8Q+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHzmAVlR5Cz7DVTbsjqDzKxIqr+lGClVAexXRV1RC81AiAP0BfBjCnOEhhPOGnQMidFD60unq5ut5YVz872BRqW/w=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_9.0.0_1583169829195_0.2761196817655327"},"_hasShrinkwrap":false},"10.0.0":{"name":"classy-ui","version":"10.0.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script.js","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage && npm run test:development && npm run test:production","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"cypress/integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"cypress/integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"c95d9a641186544d0362ba569493632578b15c22","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-wpxlZDNZ015w+li84/skWIfzTjcjB4Wmz1qhU5GIEgwJblF5SUXf/SN0sb4xjQ0Ic2QeyH9llm3K5OG6msXY/Q==","shasum":"c7f0fe3bbb6717db62076ddc7bec30072d9bbbf6","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.0.0.tgz","fileCount":85,"unpackedSize":801896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZABZCRA9TVsSAnZWagAA6J8P/ApD4pQW0OmS+U3QASZy\nXETt5L5KbuMkc3nejAt+puoR1Z4M2YK+8gpy8QvkJ8sMeObqmexY6I8hFrwp\n9y/eXmHLo9zXmFDJBj2Ky9Ji21yz4TsMkmtNfgAmu03/sVw8ObBioxDxvlOH\n/lJD/oqb2Pd2jDHfTlMZYyoHKx40kcfTdFr+xyqYCvtFmIHNM8JL9Tt0qWdX\n2QLPv5mXR+G2cVtv2JHtReqkVrUdoy3ZlpwqgQq4zDqXDMOW/snuaO3vcuk/\n2HTKdUBe8oZGgdvqSLPUvGFtpYOt/ahhOnP+8j9E3hINO/GDZsylwz5KoqRd\nPyOcH246dYU/Gn0ag7F6j5Zhek9qSoyDphCTM7b2kpNUJTylgSX77z4Ayfdt\nYkrH7LbqSUPYclm1Fksmn8br4ilGptiGVK54u2F6M95pNmB2OBx26BSiLyJI\nL9yEhRM38zP+VG6F6nXJJSjJdzOKAzFCjqqQkgOajOG7h2B+//aeD2mRVgHy\nDApWP9ZqBY9WL8BNmE5l5wiyRgwB+AhJijE7OhrROO6k/GO6d6zYOJO16NQy\nsTPSVLyQEz6neZbs5bqvA4ZnkgeC8xat/4Q132XgIrTm4n1ueBSK+YIgnb8L\nqLAdE00yraC1rGUhljTl3qXO10fUUZoVpPwMJ1JZm251sqrC7LiUTlvWXWkm\nWrXo\r\n=5Yru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1ceDbHLAuZ81k3GTtVMs5egJko/Gu/216Z5pRHrQmDwIgQr8VZzct3KfTHTx8TygG/zdIVGNvGginIWiPsTTtloE="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.0.0_1583611992775_0.08039354962757495"},"_hasShrinkwrap":false},"10.0.1":{"name":"classy-ui","version":"10.0.1","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script.js","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage && npm run test:development && npm run test:production","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"cypress/integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"cypress/integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","@types/node":"^8.0.0","autoprefixer":"^9.7.4","classnames":"^2.2.6","clean-css":"^4.2.3","normalize.css":"^8.0.1","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"c95d9a641186544d0362ba569493632578b15c22","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Nl5wjEIPtp5XKbEpeu3f6BAAEq+/1LuxXEb8W5xugtkQzJvglgpAgv4LjwFO97dS5SaimxpuWn6GGxCp6HYtIg==","shasum":"801c367c4e09910258cfe4ba84f996bfa67f7916","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.0.1.tgz","fileCount":85,"unpackedSize":801882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZJZDCRA9TVsSAnZWagAAiqAQAKRqShQdWpAu+iE2K+8U\nryde5y4R6ErkqX0WI6d6nTvSqlMfF0Vp2HTHxOEQb+7boK7KyD42HUIT8i+8\nWn6ZvY/SnqL/8wolxP0wltIOztvJ5JKdkgHpDwn7ub4ZPdnjklve8wwmBmK7\nDGiIAHpsHDTzsW9jQ00yCNf5SfbCkRxpn6S9edT5Ghsv8/3ySPYZj0rWoaVW\nn4sORkEC2UINsH4iejtwJhyNjU0tJdp1/vUXacp74/LaKetV8wnBfUmEJSgW\nPGkETJ/MRiqcT9J6t+VgsxVaeZSH9xEgPJjwIDn1bN78XqGlQTVnIBCoUVS7\njpsGtODmN+A9zcxrE+Wv/tObh6WF4E925ll4c+wmdSPP0cNxCXWQlqigejeK\nmKtYHbosc2ihyi3pxtQPtKNhxH+pcSPuQ4zXaP6+F0slA+U+vAoFc8u2biDG\nvri5TIgC8pw4R7AHpP62hfG5YVhI61ksbIFeOzk2MepVYfcXKOC5kPBOcEeJ\nYcL4jDqrpdykoofyg6IML1T9CA+BCJQ1R2BtEBjx1vrv6blHhZGDcrLIoo/t\nF/Z1XQu1udXNWl7Fkvn+VxiqVFFdjPpE2PhTiHQFzUvKCHXi6MKq+zm2vszA\n5GRL+UcnCcVI+ylT9nVTaZsIpZfy68jtm/V6K3I3Gxphpz+VmtIg9RrRNU2g\n/kI/\r\n=T+zw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpCBvrEGVYoLKc9LrOGu+3+UDpQHDAM7x2N86husdV6AIhAJzvS58J6+UgCkZHfV+0YFHtJS2OiaolwebyuUCG5I8N"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.0.1_1583650370561_0.8379495181078189"},"_hasShrinkwrap":false},"10.0.2":{"name":"classy-ui","version":"10.0.2","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script.js","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage && npm run test:development && npm run test:production","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"cypress/integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"cypress/integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2","tslib":"^1.9.3"},"gitHead":"f6a344197f02a3a7922724232a292a1a19afb831","readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-b+JvqlWR1tYD3z96XWzC10pH+DqgTACARfv7Y+bHvE1oM2/2/C9mfXsa0aukxmjZdrGybt90MelWTz+1VSvvKw==","shasum":"73625901200d3a70a029db8fb33b6b69b6dad017","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.0.2.tgz","fileCount":85,"unpackedSize":801823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZJsBCRA9TVsSAnZWagAAdTMP/RU7DIa9mKpql5AwEPmD\neE/hguD1shNGD5RBa2yHiAUmhLI5SSA6CxEq4cVnCQWm9KX7aGJaQxOzv9K2\nKtXtx7wZ8qyKoDbpaGBxEDbInKx5n2cz186W/VZVI+YHYNrXuAE4WUcHLX7j\nbpk3igrR2wygOq7y8wnuj5e6PmxFVjf+LBNLjOMwkvibqGvykp6XN8g8M9Sf\nKmfwXS84RAn1nYM6IKHCivDZTJayZWIpr31IKq8z+m6rrbU1RzywyDxEfIc4\nopUJ6Hr23ctXFcqaR7jGTIJis7PZyYaWKb1kOYqRlvh5hMsbegy03le31c97\nOfDurC1ddF16oRfFCtsJW+dbjnW2/bxvNeb3BUf9g8bVJZStDR/anAR4A68y\nNwTRQW/QUc+uB9uKZU4zBaC2cGkU+6TiEajB4enoUA2p5H5xiuV8CRz1XW0/\nWXJRp6hPbofj1QJfXMXh8sO/55DxdTEmzIU/FUn3/GjsZ5utfR7Pnl0Bq/47\naeV0cKToKzw+y+A0UFuw7MWVUUsIebE6Ycwhu0Zkcxa+HrnO+fSCLPlufSyj\neZpLEYhfMcCqXffs6EW13ZxsyfiO0dYE4tVSVrEnV74L+M4xGZ6m5qEDnz/h\n2CzRcL2HKbz7QkU5VZ4x2UImUeyB7h2nqDbXxDV36SRcUN86nW3Jdx8S0CrG\nKbZk\r\n=F2Th\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJGnI6JfU4HPD5X3oNn8TxV/4lEfX/2tmkXoRM+PfvyAiBZA19WbASo6PU30kIB6scs3ZJvdftjMkKf2dYCtVFs7A=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.0.2_1583651584918_0.7192810182339968"},"_hasShrinkwrap":false},"10.0.3":{"name":"classy-ui","version":"10.0.3","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script.js","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage && npm run test:development && npm run test:production","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"cypress/integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"cypress/integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"f6a344197f02a3a7922724232a292a1a19afb831","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.0.3","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-bea2FuV48NjRwucH6yXsMnMHGhgbuCipRLzaL3WazdTgdqTNnFfixzL68Pfw8UNw9HExhIj8XLOxyNASZyEqsw==","shasum":"eb4c373a72a534b06f776220233fda345c2e67f1","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.0.3.tgz","fileCount":85,"unpackedSize":801823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZJwFCRA9TVsSAnZWagAAG/MP/3GJrusvba+8Wf0x1zdF\nh90tdFA2itj9K/Q9CNOwjznU2jxCens4/3oKSERnB1LB0xal8jfKbBj0kQqg\nYZQweeMYiaQ+aMuoFcuhJyrDCg8aMhmLtFY11gQ3DJgUX84/j4K0nGYuQTIL\nho2X0vWDW4ZKq5tF6Y75JhKbTlckjUeFpU9cSgL0X27DDZptgYVcZcGPIPt7\nR+V+F+J/dcUarocPFcQd2SQcrhAT4b6aDRPX5AS/tqNUOsdX1mCloxr1OPjy\nyFAV7kaCrr84vpDavQCHKxpUVN03C9sfxFdtG26APId+3MQ1NSGXvREl99DN\nYjfxtUARy0Wd//fosJl2xPM6u9JSxcwfjOwr0AJ3oj/A1XTIAfFNCaF96Tgj\nohXcBv9FGz2YKyoKykln1xMU/cdVz+/OxeVq7P8gXbhtbsbE/jhsivTSulEl\nznA7KNl0620E399dRfHlqTrYCKY2rKA/TjenmTLwh9jAmYpNlPo9huVsPwZ1\nsddEI+QWqwDH3pvkirYn12ZwM87F65WxKRXXuktoAVkdYiBaoonjH1BQvYV5\nUwx3Mgf/eM+O+0rdCXw6q+e7qnEPtDlCiBq74/dm62nM1nl11PBmd7O0hQrJ\nmqUSNpXLUIsjS6p05bX5d7uB8U+Ig5Y1YN41dlH/diYzy74WtTUCq4OIa/Zw\nb7fg\r\n=NCvv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdX/5IHT+PXyL8K7fdoYC+89vagbvIeEisX5HWAINCOQIhAKWlaUBdXWgVOrRMut3tq4qiAoN4Bfoetazfu1f00j2h"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.0.3_1583651845120_0.15994754623973795"},"_hasShrinkwrap":false},"10.0.4":{"name":"classy-ui","version":"10.0.4","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script.js","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage && npm run test:development && npm run test:production","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"gitHead":"e40e312cd89d1e271bfa258e9afa09b6364b0d2b","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.0.4","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-CXo563PFN9fVvxvZuUJDv6EbSvrUY6vGP8adhwFZJO18d7vKLAakBxP1exE2MHe13u8lmtbHJI5mx8OxImsjGg==","shasum":"9f62ff4185b8e19fb6116bc1bdd78c05afc3420a","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.0.4.tgz","fileCount":85,"unpackedSize":802187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZKQxCRA9TVsSAnZWagAAHT4P/22iItYwP0Jz3dIKp3PO\nVN/uvfK1ajEjQYSVKBBZerWXA6aRnspeck+sTwBrcaoAt7jqqjvIt/l53Lzj\nMcpNTPB6V0PunUtnJRx/VJIiVqxNCfyRK5I+FHnItDwJ1Ve1jfRCONfhjZKH\nZrFrGG2yU1HXY/G/6/bTjDk3Xr1/4qcJQtDoVmJIbyjinO2QlGcdFgf9kgnR\nLmW0u1DKlp5NrwmqVm/EQcma85dZKY1l1UJXZYOgbuj5kOSjdkvxrKsl3bUR\n5XJmt1CuDuNoKqJ9XnPghWE3sxtH0KPJv1EIKIMj+pSgqACCApZKiH8eRQJ0\n+n0xqVzGvKcVfX/SkBQNtBUKWy1b3o0ILlFGCnX72xLbLc+OM7zDuOoKhhIP\nFdlGTkRh1n+A3TaQ3MLBAcQEAx151gqW5K3EBkrGMIFgU1uBnXeeHVLirh/R\natC10a4uMNcwC33j3laBKWSWXzP9YgqMWBhrtLyqLJZnEe+o0iAHQ/QARgFG\ntFTqx70pXYCITqpTbgitsEmK9SR9fS/O7RmHmLnBOJkugEzDPWZyhkYm31aw\nuYLjUymXe1UY1S2oHhDm03b0fhvHq9wQaqd8QNxQ6v1PhZjYynMYrDrxq/Op\nLckEFqgX1Y53HXuZ6RM5MSqaN95M7y+1d3RYWF5DBaxt6WbGzmZCTQkQmZxP\n/qgO\r\n=aIod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESAe+bQ+P3jvaxz4RsEQcl+CcUC+1bqy5f1wTFNq9ShAiEA7342JKOVpK2eyx8K9gmIxlQwhPWQGnQYSV2AMpZTHFg="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.0.4_1583653936818_0.8247882667118072"},"_hasShrinkwrap":false},"10.0.5":{"name":"classy-ui","version":"10.0.5","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script.js","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage && npm run test:development && npm run test:production","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"e40e312cd89d1e271bfa258e9afa09b6364b0d2b","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.0.5","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-i17ZqEWLOuiKakA2qlgvHk7rz2auf9u0qWV3BWTfg2HX9WIG/ySIW2ZK8ZkLjnTx2elB6UElE8Cwsgu8dxDAHA==","shasum":"4c1c998cf08b1181d51e84d7e0803378c1e01a8f","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.0.5.tgz","fileCount":85,"unpackedSize":802187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZKXdCRA9TVsSAnZWagAA/KsP/2kvg3TMxzV4GrLNdBbb\nc2px7GuPGxFqNozqReev4sBRxllC2rv+X44uzjrvsYzSh6o5JvFyx8Ahb/R3\njXu3Pazm7j680HlbNnCRbfj41+/1OgcqMjDzxvpk+jdQZjGEqPHVEOFybaYv\nJuIrfCccS8aasC3rX+OsN8tlbiPwHMrtUeZk17VO8R4iPEpF33jO/b0Ko+Vi\n2LNom5N414KUD0RXpZUlGm/pIE0/73J9eMz513O4qNNdq3iv3c44mqnCy3g9\nNLnBX7flvIDrLr/EWqcDWXZhiyrpu7sKnpsL6Iv0w8KzEXeLWcflzxoJJfzr\nTfA6XWCjuRnlrmBmXgMpEt6qm0zT6tpm/cjb25xluQ3GyMWYYYDJYlWS0EU4\nMfBApGn2vFG9Pum5OsBPzaB68cTJIFGFjiSsCPLCDEahAlo8J9PL6k/WqBs9\ntu0/oKq2xo+qqTi2Tig7H5wuA/XKirhnF3M2auDhLKMxHJ62WJZSwxStVUvO\noC8FKokdy5o6ESqHg6/SgpQImioOKoy2AALfFRYrShYZxQEVHt/nxyB8CGZ2\n08tlFzvuiDKViAO6lmHJde2W7Fpv+bD5zmtULKkKqcT4vA+Jtz0eZveftrVU\nAT03/0BuWdej9msKJ6GThTbcjISFl9PExOIoKW9loVRmutAJTYqelsKZO6oe\nMOuB\r\n=Aneq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGLvn/tUGRGw0pylqqGXy+9g2r02xktU+MUDvDzQxeJgIgS0h44XXAFSTdmKVEm1Os1Z2aMnVT+jhBBpC2qgNSiIY="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.0.5_1583654365512_0.2895850003964595"},"_hasShrinkwrap":false},"10.1.0":{"name":"classy-ui","version":"10.1.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage && npm run test:development && npm run test:production","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"184df1634683cda52a9ba8bef29d50322e13812e","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.1.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-DJg7Gh6lugUKHrD4C3ye0S7QABWTvZVP1Mz5wXYEK6cDWdZlhSI41V8KTdt90XRZu32vGlZ7otydvOa6BzcP9w==","shasum":"02bd29a5da21a11217759893d23acd5d942c477b","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.1.0.tgz","fileCount":85,"unpackedSize":810606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ0QMCRA9TVsSAnZWagAAZYgP/3f6yQLaigt3SYMVpLJY\nDND8WMBXH2K9QaqWHTGT5STstgpI6qT0LU11m7DzbQI5M5qW5ROFc867NMDi\n8C18rPeEDcoNMaav3x/fcap3Pq32ve8AssHShxJJ4lvNGCiTlDif6AfVgMUI\n0u+f91uBjnY1TBpbWbEOmT/PSOWkySNG8bV8q7XDkS1xvVQigaSc6ktmAIUO\ne/yFZv7jT7WutEXKQORwzSaMHlGT4K86Kq75/pZdB4lEGLU8jNOLaGPot8q6\neIPtPUZnAB5ZdNqHkh7i/kXXLBe5dLl2/9MfC+f0T6D6Nbv/fYr0IJPMSr1U\nwjYuwKAnSOTYbsnT6KK63xE/xvhxaZuEslK10vVOhSBeXojBh/+aViuq2nD2\nEXvsgpcWg5PagbIes/Ej/waoi2TyrwwoGjIqxJGw3spue0afd4ioaljdpOLk\nYCs7UW9DaAnK7gpdeXAiox1lsX4qmQmR/DTKekotZkwooGPKjWWobv6AkpCZ\nVQTQxagH82a1FwNQPOlZ21nbqJfX4pLkr7Zt5zLFN+2wJCPSOZsj/QGkb/EH\nC2G/azOr8xcR0MawcmSu1/4HjZ1bOSTggRm0UCWBQYr2pKe5wxlZo9AnVVls\nZLqwMb+jejopvUgk81YKV7LOaQAgnFGQM+Oax8uH6jGnuyiBCKyLjcbc554f\nCG5g\r\n=BeaK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOOnFT8xCqNN2P6gxCi80zVfMhvZyYigX6/aRufiokxAiEAlW5qpImDgpe230itZo0E2EyqNP1OBZUu4t8wRKhX0oc="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.1.0_1583825931577_0.28258235184556724"},"_hasShrinkwrap":false},"10.2.0":{"name":"classy-ui","version":"10.2.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"1bed7e23a1ad6ede255db904834490fae8ce30eb","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.2.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-xjPjyB85mJZvu+wfPsKfnXlDTNkoAF2jNaQK8r4LCZSr0ilOeM8LJz5aHDHl5utBhrMJVWN/6F53EWkbusyZMw==","shasum":"60e9bffde25aa419c9f8435bfbcfdee9a17a73a2","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.2.0.tgz","fileCount":85,"unpackedSize":810922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaJU1CRA9TVsSAnZWagAAUWMP/ROvMXRcI/KQdAKgfNNJ\nJGBxMlbYsGMK6h7ycQ5V5eeZsmoEYqNXpSa8/B/319p3TQlxum4Yw+eZJKFM\nOXC7W4GfgwBg//0AT4sa9d8FWu3LN42mWhluEMF+y5QmTHKdIdglRCB6WdQ0\nj3wpWjFLQox7eUjg6DWgpsFgrp/Arap8GLeChG8i3t7jIZMH3XR86qUUbF3Y\noqn5vJLV7NrrU+gDjR0whVf8QLK18tUVk2Cig0lw/M3UJbbRP13mUB8GhegM\nAO1W64WXpp+uYtpkwFS6VVtyNE4X3laGVYb95MV+HQderMChcm7gBW/3yw/j\nss7ZYrt0wAE7ywSef43OGIG/xla6+fZFdgJ9Afw+Gx1SXuuZNNqgxrc02sKn\nYxKac4dzB9gNhCkQ/InuPF09i4+al7YFRQgKl26ootEYjiJTc0l406RixwLw\neqCT+dlu1TUI5+vnSqyxyvDU4NYBqBHJInxiHVe5hEPELHJ6JVVbsIaV/Tro\nIDXAD0qpd6KhQ7O9C7SDy61wMz3VChIFgL4rkxo8ZER/XsyNQye2NRvTwnUc\ntRTvdTBIM0fTriVRBR+v3TCqpKEx9tzSslIy171sXxPkf0rsAGtK1242suzt\nJe1XIqI3X1amfhzW5CdSW59dOaEh06YCw2IxIbt9hVhtm436MzMXHt2NtnAW\niLjC\r\n=WGbF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCEfEhaZtS8o8ErjixqYquvJBE8wie9idK7huwf7gu7wIgKRYe5Ly74R+Lb98ZrO2QBwpK9a27sWWgXp9AEV5zD3A="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.2.0_1583912245323_0.7525108153052169"},"_hasShrinkwrap":false},"10.2.1":{"name":"classy-ui","version":"10.2.1","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","jsnext:main":"es/index.js","module":"es/index.js","scripts":{"build":"npm run build:lib & npm run build:es && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:es":"tsc --outDir es --module es2015","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"f63bdfd01a3b43e3f6ffd77a6ebd0f578120c6c0","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@10.2.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-T+iN65+9vdAjPW/82JmDrIYvyHf2OzdhOJgCR2gHeWDxxdgiFNNseyuRFCsrgjRT4dg++De2b2IlOP2+RJu5eQ==","shasum":"15fef7c2c39700200e8397d48157ed6eeac760c9","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-10.2.1.tgz","fileCount":85,"unpackedSize":821808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7ChCRA9TVsSAnZWagAAvPMP/iT7y902XVOl4kd7bmb0\ncZgddB3uQh7NYNO6b/7xjXIt4IjRhos+Pd7EROCbjkhbssM5FIXhnsxTsUGE\nLeP/SFu1whrtB6NJF0emDMAn/MJ+fiEIVvWazB85sb6+D/ZkwdoHaYRr1h/S\npaRr2vsc1aFntuVLkqtioxho9I5BtTsBQrbwLL8DvfSW0I/LbIM1fhNiV13M\nbFIqQe17drXi8F0q1DsZCVTgrzuFe0ywPIjlPBuCMMTXnRqiKfRwLBIcK4Bo\nNdFpxJrztSCi+UoRSipl57ezGBonE/pJVh4TE1A876qHbvSTX0E9LHdKRkZF\nCQrCt3r3nYG7Tll9hK+2yje+K8yV0URNDANE+s5OAw92YAqYZbcLwByaLsTt\nWZfq5o+ivB6h4/gRCyh3K6MakHjI/9IoryNLxJ5siOVtEgnTi7CExDLmupVd\nGZSkxAuIQIlS7Vz0NALRLWQ82WYVqXZq6PEubE5DIcuokJwml4717giGg2rJ\n3lZZ2a7/YUkWAeTMQx3yI0WI94ANqXyJEX4s2x2z3H/9EYOqBmeCEQnFSeSM\nT3zPfbcZEr36pOgg9LJhVI7NAxeMQZggTnnPxDeSSo6wTvbo1gyFdutcshGm\n7dqob5gjS25stYJQ6Rbw9xSuAdOhMsb0mTt0tVLlLyDNb/21goNJSFtCxlHN\nXYTg\r\n=H5RY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG5RWvAD3vzBhRmUbN9/6whlxIsBSw/k9MOYBcN7Lh9nAiEA9wqze5YV99tfC8YdP74Xye4oqswaHD4oqftBeWYm0UU="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_10.2.1_1584115873463_0.09245105366576145"},"_hasShrinkwrap":false},"11.0.0":{"name":"classy-ui","version":"11.0.0","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","scripts":{"build":"npm run build:lib && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static node_modules/.cache/storybook","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"c2f4287e540226942eb21fb76445899ba3d3844c","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-ok8+DdGLuT207tkWJdBft6VOt17nVCWrd92Pla6l/pfK2SFcG3M9xFI389BE/jlUvkSwa+317AXFadlIzTI2rw==","shasum":"980063fcd1fc6c56cfb0cc5ef717dc8876fc718a","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.0.tgz","fileCount":46,"unpackedSize":416365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefZSlCRA9TVsSAnZWagAAUIcP/3o8SKIFWY+Birk2Vq1C\nkEoYRvL+RoBirINMgY94P0EWvdIJSCe+eHfIx052CiultYO+HyW0mldw7Oum\nQHIKHu1B69TeHAjHYnGwinhO36GU+LVFWxViqPeyte1Jur6Bv94g4ZdJYzjz\nwgc1WwYYGaUVEaJXC2EeGokQrCMBsVQTVTjysAx2dIsESVpjFfpKYo8+unZ7\nKDYydij96Isrz1FfE1siiyWnoYLPhdWHdmPQzBPWuqeeRZjsnCzYIWI29OAh\n0DRTaoqstqN8ECS0qozlRp1D+/5OXxLDxBG22KTsdAo4+4oHTWePMnFt7LrF\n/0/DFRPciWIfqRdHyUTIQrO2CgOSh1du27gqkZQw6qPFmKiIA+Y7Pxie8JZQ\nN9mOrUbiUMeWUD77/5u5WLY2akxvsZjvrBZEoMY3EaUnL7sYz/BH7ysS4nUO\nsfU63zU2XwyXSDzMfGhvvGhuzzIiLVUdAVmGj2JuJ56zB0qgMBpGLN7WJDya\nD6wAz0OUmJpBbAwGHp983ixPKhvY/XCXrprPzMdEuOmPpSJbtqwKO49l0QmJ\nzZBSRDQQZPAFPTYU9YIqDCcHZ3nYX/kGgPeqS+nMV32y5XRfvfs16gxMq6f/\n6FnSF9h+mxwzm10dPQ0D4L1kKlI6C31qsEMKRE3hOFEtWoLsYYOBvIeVW2Hu\njrKc\r\n=Qx7f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAY90hh9qcef/pMRgcBHqKou0n8PNabcdC8OPLIYU9lAiAGPbw16wXY6BVg3F6ygx+5XGy2iwN0uNhTFghgNvK2zA=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.0_1585288357307_0.3775034199957712"},"_hasShrinkwrap":false},"11.0.1":{"name":"classy-ui","version":"11.0.1","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib && node lib/config/create-types-script","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static node_modules/.cache/storybook","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"6d9565ccad9821e8d7e618837a8b7348b12e48a6","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-zyHJGiLt0gp3wQdY4yYP9uqUymZSoBirIt1FQDTLsOop/fQB/CLsw5CanhNlhl63bW0blw2DaXtkMwCQcWpcNw==","shasum":"f03f727d297696726af5bfd189fb61bec6cf7774","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.1.tgz","fileCount":46,"unpackedSize":416398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegGW2CRA9TVsSAnZWagAAZx0QAKMhQYlSjAEuWze52uFO\nYAi2C2OOab43oxNcJNu36qqWLIpH1xgHmX7ITDzqn+OGC1nl8sNo7APs2swK\niBe/uavnD3J7nhVcHFIKRm1u6eTPJw+XC3/h0fI7t/gK8qkd09yUoDFYLhTX\nEdQKfHnktHAsIdLri6l2zVkYYAKyC0kX0Q707GDrANuMoy3+2WdriQBfI2gC\nMdO2QyDk9fW3x8mCGGS2WSnc6E7L7SK/oIY0E9m4bpB3y5Plbzs2pf+PPq0U\ngDSkL8iq/U/CuGpP1GukXFNKjulUxmc37OzwbfZMSYW948wAbwOyLn22Fsfj\nkcqj8PQe4aLra4qz8zh7MMrxvFHas/IjXe1sjo2/C+f2vxBms+T65x/2eKiO\nhOyYEDN76S/Mpd5W8iBqguv37cxYEu/CLLFC3VVdTtfD+sFRhwnVnQEocrme\nd4IuWuUD1pi1JoZGbpaNWQodGmmhh3ZSxZciDrYAsGSDsxqj+BSvFQEdER1v\nTvGC1yJH5v7zYb3Qr0xmPpaGDJSYZhGgd/ZgpEGoTgjN/SiYZD7TGyDs2wES\nyEw8hFusvxrvKPtJ0igWwd+BQ1fHe5y7EhhIcyNJsU4Rm50dKNVbjjNeB04M\nStJaR5SPikeGZW7lq/PYJeBUcrmyNWHx96rIpa459y1UpAtwlAuQNGCe1cof\ncN/K\r\n=QzGz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJntUpBNHc0vQ1+o9xmj342ZR6E2Fb1cxE5Xm9DZksiAiB1HnWjRj2lctOIZ4APDWH88BUX6padeJbS1UpFQWjOVA=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.1_1585472949761_0.5079791839782537"},"_hasShrinkwrap":false},"11.0.2":{"name":"classy-ui","version":"11.0.2","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static node_modules/.cache/storybook","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"6d9565ccad9821e8d7e618837a8b7348b12e48a6","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-krT8V+Eg3hWjwY6Ir7OWbSy5D6rJbJQl9bVRIL5wPAepVrS7XPF5XPkJaRz8h54JeuJVPqjGsPAcuprJcQoCaQ==","shasum":"88e10d73e74e041d1127b6b65cb844ef9ebe388d","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.2.tgz","fileCount":46,"unpackedSize":759333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegGbxCRA9TVsSAnZWagAAV2MP/31OwR2Y2MMLi/SR7yik\n1VlNI8gdVLvVbKu1zGKGNRQaKv6mmbULyXnc25MOZHrhjuPk/1BtB2EFi1Ko\nwH8++SPVzLaFS4hI3P9qKVwn4ioqilOVkLwSsUtDuLQuHmBX+Ce4dmA5BHMY\nGLCQ+GlZ2GK0TDdxpI0BcN+KqotkBe7dr8C+B2qhYsrnuNqsZDOycLSKw3lb\nc1i4dOVTkTBgWclwUdCu6qfPYZpvx+g1E7nODRGERjb0bMdSdKVBh2okfvdH\nFY+Z1D4xs36szr/gfdokIjz0wKbHa/41i11g21cRXgjXsqRlVeIotgE3Rtzu\nBjwgIrsQ266CQ868aGnalc07F1yAJTBxT4/Bc6th3upzkmsedcuKSkY75bh1\nj06wJ7cKMN1kNOzlaUYv4Bq1xoK2T66ihmoYUJxZweelS0fRGqUcvfPsclgs\nuRqP9eGUITZVXluhCiJe7vkRuVwN7k07/n2YW9HjnvcGXEhtujG5bYWvn2v5\nenpKDDvmGSNKN8kAJ7II6ZKdRV/cVSDII677WGeHd45vpSbUOBp5T14fOvuf\nnY9E3bvHPbK/IKhROZzIB6yuuzM8+AzkM9pmaRNCE2rRqFMx238/0fBh/OyC\nIWDE022hPDJQKeJfyih3OI9+hzNle1pBUneg+H/PmurTTFm6oy3rIwezRelQ\ntH61\r\n=wgSZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlbzr7j1r2GWyqZf2a2yEryODO/NzHqwmvA9DNwySarAiBAbsYoz2dd0rd6MbCJA2nZTcasm66dEODI/p0NXi5t5A=="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.2_1585473265476_0.5257892170980594"},"_hasShrinkwrap":false},"11.0.3":{"name":"classy-ui","version":"11.0.3","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static node_modules/.cache/storybook","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"ef6e60144dd9a004551ab8730febb6c621ecf1ac","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.3","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-aE0ngVnqsV4fi+XMdMG58sudspo8bwlYQ6a7jy6cGnLi944vBng5OKp3yrqGK0ur5+KhGpxUIEh4+jPqohlaCw==","shasum":"370eed37934c1a77ccfbf2f8acf83b26ace7f8f3","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.3.tgz","fileCount":46,"unpackedSize":759333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegJITCRA9TVsSAnZWagAAoKwP/3D4FIQ0p4vMMycjEon3\nqJFk0mShpSDXVUr3ImsUkHFylxmEJrc46IacVoiDhn8qjVBoQG4Eng6Hzg23\n+bZcGn67KQGQRntEgX9gWjaaJV1dScf1pJKJnHXvgMt2T7lN0hebexfkR+F1\nkAGUGGRevTZTfQBt6Dw+FzTFW8dyu3MNEVJVY6Azurp1VQD+D83nrvKSkLF0\nyOQFqGWnUePqo19pHaEZsaWWAmiuhqLuxwfsa7tm6RCOtMf9pscMMKMmfhSr\njdN3pyfBSCKyzDeSwpVrwvtkkWdJ1MzTp3FqrgsdnP2ezMuSKAAKOv5P804E\n7YQp5IT7CCJgsr1FKRzSZ3Ja1utYo4bFqguo/iAbuCdVCZVRdaczChh+cJav\nIKuURs94aZF+uxu+WbZmKtqfhk2pNoAVsC8b59RlRUthlM8vz/Da+a2OtECR\nWjwOX1ARg25VczT+OxQZ0yatScI3ig2iIkB2fTJYkG9dgi57GawBmUaShtjO\nYfPANOHwrgkEvgMPwgFg8VLkdMm3agg8kKQjPbhliIDMxKoSv2Pc2lwPFdL1\nVPZzehv0Nk8ZDDDpc6Z1iW9SXWUbXCthISwzZ9mwymyF1P4K9ESbVJa217tl\nTkUderkyUF4tQ7iLQsyfppx7Q3VsxJMvEzBdzF0yPKo1nl12WKRERn7r2Y4q\n02kF\r\n=/Zm8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrPL7k4uoKH5GOmfwXOWc3+wM1ZVgFzAL7PJdmdcgAWwIhAJWKBuwlTnu5AqHHK4pMGxcGqY+SxrRleY4WdK6fBCkT"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.3_1585484307521_0.7496028214770971"},"_hasShrinkwrap":false},"11.0.4":{"name":"classy-ui","version":"11.0.4","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static node_modules/.cache/storybook","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"ef6e60144dd9a004551ab8730febb6c621ecf1ac","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.4","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-nyn8Vx0Woio6Zx0Eg0cDbaiKmFfTd/wnowfimEY3+6enBkRnOq4BXX8dqjSK5HhpCbn8mieUfz6GejngrTrnWg==","shasum":"5b4e2169e08b138057a5a0d128e8a3b4bbce8391","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.4.tgz","fileCount":46,"unpackedSize":759479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegJdqCRA9TVsSAnZWagAAxXcP/i7u5IPgik9Gab4HaEHR\nAc/yQUKCN8E/vf+e2AclbEgBHRIFn2BPJOTD0qEXVzXGydZLXDvtX9smPApK\neYoBIDSW3OKsP8nfY5DAgoFhx1/N1SMdT6/WDXl1LZ0Bs9qFDboCKXYYuQGv\nbYgSzjW8/rX3FvKAwjTNzyaHUV4q9816kDIDZVQamUIYzNYP/2s+Ju/K9QVb\ng8uol20xANyjMiIbSXZFsSJRn5+3XjIqGZbg3VhAIto9o5+M6ow/5yPVFC/G\nlXQ7CNWqYZeHU7uyeDogl+ikrK8O5bHoCNoohiwhmZBIwV6Wph7xQMp+q/uX\nQlAc+dIruPbIQqrQpW/Ab+AtXiqPoZhcxkX6soFe9J1ljqAegmWuLJB//WdO\n7QMMnserlv0Nbr9CEoDSdhFKnf+EP6CxrllBfwR2M8jvX8JcVrEDrmygcohn\n8qFlArco8hs/AXz9BIEDi2KIaOFAbTdXKWgL8Pf7neSgeqfHgPdFtAIKeK4u\ntRSCJ7Fi5mJE4qnrYh5jvucPFzUaO2sXvJ6jKmUWCkZm1aOQOWwut1FhSQ11\n2968fpql01TmMTfu5sQxJXb4q6ipOpKZeCeXqFdA9kSmHC4ITZpG0cndGMNS\nPj7JL+NkluBNbaYTJcpjZWLQ8/r8cm8iibbuYamlKbr47qIRLoW+8RQjh9nZ\nrdk9\r\n=TZYr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9d1W+wAPBO/CJ4jHKLdDotbndcRBeK9PebPEa3LFKHAiEAvjQun5tSoLBYR6BfznaOUc4kUZYfzasVOCMHfdS93yk="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.4_1585485674354_0.7683558938033024"},"_hasShrinkwrap":false},"11.0.5":{"name":"classy-ui","version":"11.0.5","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static node_modules/.cache/storybook","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"npm run build:storybook && node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"http-server storybook-static -p 5400","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"ef6e60144dd9a004551ab8730febb6c621ecf1ac","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.5","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-gvgQjOo5mYpzlSeMar6FsfeogbQaYhY6jp534qxvZLDLXWesxicxYX8bA9pIlozN1XlE8nXJdHDTN441hdYLlg==","shasum":"6194a618635d4d4947ce8e2445bc7498163ed31e","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.5.tgz","fileCount":46,"unpackedSize":759333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegKu3CRA9TVsSAnZWagAAwvYP/jDXIBv08bgLywrbZQO1\nLqE8ShhxIhVuN4bQaYRrLFKHL2+uO+boWUPFOQ8SnmfGshJ30LuXLayRxl2J\nFautO89AfVmlMDqGYJMwdzW0VNwE77xdjetxsD3w/sQI4Tgr0pJONRVaXFt6\nY6CqdeJvPvGBJEbdxbHOaXA04ujlnmBCGwbY7YsKbWqzfztJKVpmgiTu4lY1\nBVhrouYzKXx4cds4iCU8C9eMNS64ONSVzTz7M5Jhu7w5fh1wMRaNfwjZhD2/\neNkN8PN5nUkxsIC07gV55FSPtuetVRBJ2mXTOSf1ee1MqXH3AJLytnybzdS6\nAFOxsHGREr+Ga8i2yyU6eD0MERmF4bwozHIIV+CcVwbqq/Of9JyYKJYr0+hJ\nJu/50mVFeKu8D1ahZxPAyxSyyPkj2RyEVAjNBloK2307hJSWHp8iz0MQrDUG\nw1vZ6ezaqJdZ3827SQ5S5Fp/ifWyIr9ocNlQW0lUpGVRW8OpwKzjeD1KwnAv\n8SDlDgju3eRDLo7XEf9LUIFyo+F7KWFxpi2siPBhuuBbTCWlkDvlEl/gL8B6\nztvhdLb6638+9q1xAYnoB1yxzeKMZoBZ4Ub6vLYUtTeMLVt1gHbsTXUp3H2y\nYjN11DPp4sZ+EJQFZiiT1l3FYjhNOOxsE3dk+GSIZ7rEAlPK+5KwOFDZktcN\nns7H\r\n=W2UV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsdkH997XP1k4pYbFH39K940ZgN/7WaHYho7QBeKEnSAiEAooU8vBmeiwW5OD00ZDoCJ8hbXMz52JTY/ZxWotXscJc="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.5_1585490871484_0.3990190871457018"},"_hasShrinkwrap":false},"11.0.6":{"name":"classy-ui","version":"11.0.6","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"rimraf node_modules/.cache/storybook && NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"npm run build:storybook && http-server storybook-static -p 5600","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"924472bce05ced72cd840315cfca968da08398fd","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.6","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-fDp0edOYqgC1XeOFwZnxmStoyB5wZPGtakKfkRsr9qu+cCglTagHQtfIWIHvB68pIIDf/xpPzReh9mrZ9zSqYw==","shasum":"de3ae69780083ef786403c4888e60936638de070","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.6.tgz","fileCount":46,"unpackedSize":769377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehD2GCRA9TVsSAnZWagAABXcP/jT6nXilFmW7fpKQiShI\nPyQTWprsIveSyS6mEBAKwRJg4uxgropcfZi7C0dS+0Dn3kF+PcpAJVZHcX4f\nUPqDqcZiuddIAVHCZh/jt1GHYZyIQA9Y/38if4ZnYEjki3sBXvGJjB3Qk02k\n106lF13k8/fks8qYif9jkQJDdORJEoJOU2uHdar63Y6VhMsvCpIr870aFaI8\npgd3tqO9/1Qq7+R13oyqGHLwEdOIsLzNQV24Aq4/WewWL9yK4AnDziG1Mwed\nAPXVKFKYhaat+IrH0XmK0d8Yj4x3MP/dHmS70yUc+61fjS30N5RQoGuuAhr0\nWi73240BaL3H4AAmzlgSv6twQfyIYf0WMyJwxRLQCXAT3IkHYybJyaqQlB/N\n8m3CeiGBK5JnKYRbEEK01kWlM+OtgLkAQJB1NnZ6LbivxFMuOjMPK4ra64Zu\nOzAPAqGoiJPUhpeU57faYdIiltJDgAuDNBXPjdd5LLB0R9yLPHoFgSP+7nmr\nKA7O6YQg0x0XCuh+8mMvvye4YQSydruXH1WSm/6gPRCPAEy429gsvsSKZmah\nih7PSJi0Xb0ys++1lt+tf6mdhL5FrRG9G1Qq1iohlzqHwQKXW+ZU3RvSw9pa\nTPHEHgvF6fYpF91u65emBHq2Xir3P9SY2dB3dHb4GHKZ9eKQdgBGuuml6suI\npg6Q\r\n=8RZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ18Bou2ulNIlG4blg6SLIQzT7MqqE/ovcUQYDZ3UQSQIhAJfWX2TW3Izx7RxWmMR0HaCb7/cqzUXSnnD5dsxX4imp"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.6_1585724805504_0.4156341302533293"},"_hasShrinkwrap":false},"11.0.7":{"name":"classy-ui","version":"11.0.7","description":"Design tokens at your fingertips","author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"main":"lib/index.js","types":"lib/classy-ui.d.ts","scripts":{"build":"npm run build:lib","build:lib":"tsc --outDir lib --module commonjs","build:storybook":"rimraf node_modules/.cache/storybook && NODE_ENV=production build-storybook -s ./public","clean":"rimraf es lib coverage storybook-static","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","storybook":"start-storybook --port 5400","cypress":"cypress open","test":"jest --env=jsdom --coverage","test:development":"node test_development","test:production":"node test_production","test:storybook:development":"start-storybook --port 5400 --ci --quiet","test:storybook:production":"npm run build:storybook && http-server storybook-static -p 5600","test:cypress:development":"cypress run --spec \"integration/development.spec.js\"","test:cypress:production":"cypress run --spec \"integration/production.spec.js\"","test:watch":"jest --env=jsdom --watch --updateSnapshot","prepublishOnly":"npm run build && npm run test && npm run test:development && npm run test:production && node lib/config/create-types-script","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","lib","library","boilerplate"],"dependencies":{"@babel/helper-module-imports":"^7.8.3","autoprefixer":"^9.7.4","clean-css":"^4.2.3","postcss":"^7.0.27","reduce-css-calc":"^2.1.7","tslib":"^1.9.3"},"devDependencies":{"@types/node":"^8.0.0","@babel/core":"^7.8.7","@babel/preset-typescript":"^7.8.3","@storybook/html":"^5.3.14","@types/autoprefixer":"^9.7.0","@types/classnames":"^2.2.9","@types/clean-css":"^4.2.1","@types/jest":"^23.0.0","@types/webpack":"^4.41.7","babel-loader":"^8.0.6","babel-plugin-tester":"^8.0.1","concurrently":"^5.1.0","cypress":"^4.1.0","dts-bundle":"^0.7.2","http-server":"^0.12.1","jest":"^25.1.0","pascal-case":"^2.0.1","posthtml-expressions":"^1.1.1","prettier":"^1.13.7","rimraf":"^2.7.1","rollup":"^0.66.6","rollup-plugin-commonjs":"^9.1.0","rollup-plugin-node-builtins":"^2.1.0","rollup-plugin-node-globals":"^1.1.0","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-sourcemaps":"^0.4.1","rollup-plugin-terser":"^3.0.0","semver":"^6.3.0","ts-jest":"~25.0.0","tslint":"^5.20.1","tslint-config-prettier":"^1.13.0","tslint-plugin-prettier":"^2.0.0","typescript":"^3.8.2"},"readme":"# classy-ui\n\nDesign tokens at your fingertips\n\nDocumentation at [https://classy-ui.io](https://classy-ui.io).\n","readmeFilename":"README.md","gitHead":"ae96bc0ecf9c36edff1532f371f56ea8e7f7512c","bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"homepage":"https://github.com/cerebral/classy-ui#readme","_id":"classy-ui@11.0.7","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-LA7LHy9AOSpRb56eWpOaAVUb1ODiJEcgpOX4+hXc3215Akl12kY1pgV1KFbgBYiMFWBFrHPougfoirgczzq/ig==","shasum":"a09aadfc4217b2f09b6382a293d04122e51bd1a9","tarball":"https://registry.npmjs.org/classy-ui/-/classy-ui-11.0.7.tgz","fileCount":46,"unpackedSize":769377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehFfxCRA9TVsSAnZWagAALs4P/R0V0DVAOf0dINSEm1An\nHuuvTjbI96YPm4SZS/1zr+ou0CO0PjlXpkBzxYf+mYGQvvqV7hSOYNi33Gac\ny33xtAXj9wEsizo7edz8xQ/Eyqdw7CzzsjekoG7ImqhX7m5SQnKud2ewbEEs\neMBHxMJeaeDPJ5O04jofKaPf/LKM0iRLp0XudGbF1R9Ut+MHc0hwabmJ3Gtc\nxda7N+OwpccwnpMZNOnP+cdicS4+sTdDziTihfd9VKWKBleZFeMBQgvw4I1O\ncO47D5nCHd0U7zJukyFltd3004y37kVJEV6k+Sr9YL/EYjj66Adl9xssqaGg\nTnvkxwHkx9snvMk+P9nimHy1VmaR49MjRnOwGYaoLt1c03VLjzLskeryuwxf\nn+K/qysa/AFDgqEIHKwqPbxsrnRKdWN1dCfWKR+rpbTStickOVZRcWPNAPNV\n6kRq2DcTziz09SaEWUBp4+traEW0ffmQ88oLwbDK8JxUO7BAcrCK0ldwseEi\ngBYRPq3OB/54kKhMKF6d0zbJcTsJZdX6M0Ww9RCGKmGUeM7s7BbYzlKqhI0f\n0StT/vN3nJiPhfhPpOyIE25Y1Vx3+GTq2oY0pLijQ1qdRkLCDknroEJKgDk/\nrcN15PjZssF55VxJ32sqNKkv3oMeWjzH+xptPvI0/UIGII+YMxeZZ1dXAwle\n57u2\r\n=4WMO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEbYFFhljfNZmwKx7mw+o8H8hg1itGVhynWc9oEhJBkAIhALAJExgf8+C7xs8Nxrn2ob+V7Cn3RbThcleabPBii7Wj"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"christianalfoni","email":"christianalfoni@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/classy-ui_11.0.7_1585731569111_0.7170477449497039"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-30T19:57:54.575Z","1.0.0":"2020-01-30T19:57:54.759Z","modified":"2022-04-12T06:35:13.341Z","1.0.1":"2020-01-31T08:39:06.879Z","1.1.0":"2020-01-31T08:46:17.494Z","1.1.1":"2020-01-31T08:51:37.175Z","1.1.2":"2020-01-31T18:02:53.613Z","1.1.3":"2020-01-31T18:37:10.671Z","1.1.4":"2020-01-31T18:43:50.505Z","1.1.5":"2020-02-01T06:32:23.559Z","1.1.6":"2020-02-01T14:02:23.583Z","1.1.7":"2020-02-01T14:58:22.021Z","1.1.8":"2020-02-01T14:59:47.524Z","1.2.0":"2020-02-01T22:10:03.549Z","1.3.0":"2020-02-05T05:43:38.689Z","2.0.0":"2020-02-06T10:21:06.832Z","2.0.1":"2020-02-06T17:28:31.107Z","2.0.2":"2020-02-06T18:24:42.230Z","2.1.0":"2020-02-12T11:50:32.521Z","3.0.0":"2020-02-13T06:13:22.588Z","3.0.1":"2020-02-13T06:15:06.803Z","3.0.2":"2020-02-15T17:08:13.498Z","3.0.3":"2020-02-15T20:53:57.452Z","3.0.4":"2020-02-16T09:47:06.903Z","3.0.5":"2020-02-16T10:29:49.073Z","4.0.0":"2020-02-19T08:27:39.808Z","4.0.1":"2020-02-19T18:06:20.845Z","4.0.2":"2020-02-20T06:36:54.349Z","5.0.0":"2020-02-24T17:42:34.385Z","5.0.1":"2020-02-24T18:01:23.564Z","5.0.2":"2020-02-24T21:28:32.590Z","6.0.0":"2020-02-27T18:59:37.341Z","6.0.1":"2020-02-27T19:27:01.144Z","6.1.0":"2020-02-29T07:09:19.407Z","7.0.0":"2020-03-01T14:51:12.065Z","8.0.0":"2020-03-02T09:35:01.654Z","8.0.1":"2020-03-02T09:51:04.487Z","8.0.2":"2020-03-02T09:52:06.666Z","8.0.3":"2020-03-02T12:47:41.406Z","9.0.0":"2020-03-02T17:23:49.418Z","10.0.0":"2020-03-07T20:13:12.937Z","10.0.1":"2020-03-08T06:52:50.727Z","10.0.2":"2020-03-08T07:13:05.171Z","10.0.3":"2020-03-08T07:17:25.311Z","10.0.4":"2020-03-08T07:52:17.057Z","10.0.5":"2020-03-08T07:59:25.715Z","10.1.0":"2020-03-10T07:38:51.772Z","10.2.0":"2020-03-11T07:37:25.461Z","10.2.1":"2020-03-13T16:11:13.617Z","11.0.0":"2020-03-27T05:52:37.511Z","11.0.1":"2020-03-29T09:09:09.898Z","11.0.2":"2020-03-29T09:14:25.643Z","11.0.3":"2020-03-29T12:18:27.668Z","11.0.4":"2020-03-29T12:41:14.474Z","11.0.5":"2020-03-29T14:07:51.677Z","11.0.6":"2020-04-01T07:06:45.670Z","11.0.7":"2020-04-01T08:59:29.228Z"},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"description":"Design tokens at your fingertips","homepage":"https://github.com/cerebral/classy-ui#readme","keywords":["typescript","lib","library","boilerplate"],"repository":{"type":"git","url":"git+https://github.com/cerebral/classy-ui.git"},"author":{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},"bugs":{"url":"https://github.com/cerebral/classy-ui/issues"},"license":"MIT","readme":"","readmeFilename":""}