Merge pull request 'feature/docs' (#1) from feature/docs into master

Reviewed-on: https://code.modal.sh/tesseract-design/react-common/pulls/1
3 years ago · 6a12d9c524
--- a/.gitignore
+++ b/.gitignore
@@ -66,6 +66,4 @@ typings/
 .env
 .next
 dist/
 .gitignore
 .docz/
 /docz.config.js
 .next/
--- a/README.md
+++ b/README.md
@@ -1,91 +0,0 @@
 # Tesseract Web - React Common

 Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org).

 Package:

 [![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
 [![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)

 Dependencies:

 [![React](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=react&kind=peerDependencies)](https://github.com/facebook/react)
 [![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=peerDependencies)](https://github.com/styled-components/styled-components)
 [![TypeScript](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=typescript&kind=devDependencies)](https://github.com/microsoft/typescript)
 [![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
 [![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)

 ## Installation

 Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), you may need to
 adjust configuration in your chosen package manager.

 With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:

 ```
 "@tesseract-design:registry" "https://js.pack.modal.sh/"
 ```

 Then, install the package by running the following command:

 ```shell script
 yarn add @tesseract-design/react-common
 ```

 ## Usage

 The package includes components as named exports. Simply import the components you need individually or use a namespace
 import, like so:

 ```jsx harmony
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import * as T from '@tesseract-design/react-common'

 const LoginForm = etcProps => (
  <form
    {...etcProps}
  >
    <fieldset>
      <legend>
        Log In
      </legend>
      <div>
        <T.TextInput
          block
          label="Username"
        />
      </div>
      <div>
        <T.TextInput
          block
          type="password"
          label="Password"
        />
      </div>
      <div>
        <T.Button>
          Log In
        </T.Button>
      </div>
    </fieldset>
  </form>
 )

 const mountNode = window.document.createElement('div')

 ReactDOM.render(
  <LoginForm />,
  mountNode,
 )

 window.document.body.appendChild(mountNode)
 ```

 Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common).

 ## TypeScript

 The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
 compiled source.

--- a/README.md
+++ b/README.md
@@ -0,0 +1 @@
 packages/react-common-docs/src/pages/index.md
--- a/jest.config.js
+++ b/jest.config.js
@@ -5,8 +5,8 @@ module.exports = {
    './jest.setup.ts',
  ],
  collectCoverageFrom: [
    './lib/**/*.{ts,tsx}',
    '!./lib/**/*.stories.{ts,tsx}'
    './packages/**/*.{ts,tsx}',
    '!./packages/**/*.stories.{ts,tsx}'
  ],
  preset: 'ts-jest',
  testTimeout: 30000,
--- a/lib/components/Checkbox/Checkbox.mdx
+++ b/lib/components/Checkbox/Checkbox.mdx
@@ -1,25 +0,0 @@
 ---
 name: Checkbox
 route: /components/checkbox
 menu: Components
 ---

 import { Playground, Props, Link } from 'docz'
 import Checkbox from './Checkbox'

 # Checkbox

 Component for values that have an on/off state.

 <Playground>
  <Checkbox label="Accept Terms" />
 </Playground>

 ## Props

 <Props of={Checkbox} />

 ## See Also

 - <Link to="../select">Select</Link> for a similar component suitable for selecting more values.
 - <Link to="../radiobutton">RadioButton</Link> for a similar component on selecting a single value among very few choices.
--- a/lib/components/Icon/Icon.mdx
+++ b/lib/components/Icon/Icon.mdx
@@ -1,20 +0,0 @@
 ---
 name: Icon
 route: /components/icon
 menu: Components
 ---

 import { Playground, Props } from 'docz'
 import Icon from './Icon'

 # Icon

 Component for displaying graphics.

 <Playground>
  <Icon name="check" label="OK" size="1.5rem" weight={0.125} />
 </Playground>

 ## Props

 <Props of={Icon} />
--- a/lib/components/RadioButton/RadioButton.mdx
+++ b/lib/components/RadioButton/RadioButton.mdx
@@ -1,32 +0,0 @@
 ---
 name: RadioButton
 route: /components/radiobutton
 menu: Components
 ---

 import { Playground, Props, Link } from 'docz'
 import RadioButton from './RadioButton'

 # RadioButton

 Component for values which are to be selected from a few list of options.

 <Playground>
  <div style={{ display: 'grid', gap: '1rem', }}>
    <div>
      <RadioButton name="flavor" label="Chocolate" />
    </div>
    <div>
      <RadioButton name="flavor" label="Vanilla" />
    </div>
  </div>
 </Playground>

 ## Props

 <Props of={RadioButton} />

 ## See Also

 - <Link to="../checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
 - <Link to="../select">Select</Link> for a similar component suitable for selecting more values.
--- a/lib/components/Select/Select.mdx
+++ b/lib/components/Select/Select.mdx
@@ -1,45 +0,0 @@
 ---
 name: Select
 route: /components/select
 menu: Components
 ---

 import { Playground, Props, Link } from 'docz'
 import Select from './Select'

 # Select

 Component for selecting values from a larger number of options.

 <Playground>
  <Select>
    <optgroup
      label="Fruits"
    >
      <option value="mango">Mango</option>
      <option value="strawberry">Strawberry</option>
      <option value="blueberry">Blueberry</option>
    </optgroup>
    <optgroup
      label="Classic"
    >
      <option value="chocolate">Chocolate</option>
      <option value="vanilla">Vanilla</option>
    </optgroup>
  </Select>
 </Playground>

 ## Props

 <Props of={Select} />

 ## Usage Notes

 The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
 To use the component together with layouts, see [TextInput](./textinput) for examples. Both `Select` and
 `TextInput` have similar strategies on usage with layouts.

 ## See Also

 - <Link to="../checkbox">Checkbox</Link> for a similar component on selecting values among very few choices.
 - <Link to="../radiobutton">RadioButton</Link> for a similar component on selecting a single value among very few choices.
--- a/lib/components/Slider/Slider.mdx
+++ b/lib/components/Slider/Slider.mdx
@@ -1,27 +0,0 @@
 ---
 name: Slider
 route: /components/slider
 menu: Components
 ---

 import { Playground, Props } from 'docz'
 import Slider from './Slider'

 # Slider

 Component for inputting numeric values in a graphical manner.

 The component is styled using client-side scripts. When the component is rendered server-side,
 the component falls back into the original `<input type="range">` element.

 <Playground>
  <Slider />
 </Playground>

 ## Props

 <Props of={Slider} />

 ## See Also

 - [Reach UI Slider](//reacttraining.com/reach-ui/slider/#sliderinput) for the client-side implementation.
--- a/lib/components/TextInput/TextInput.mdx
+++ b/lib/components/TextInput/TextInput.mdx
@@ -1,71 +0,0 @@
 ---
 name: TextInput
 route: /components/textinput
 menu: Components
 ---

 import { Playground, Props, Link } from 'docz'
 import TextInput from './TextInput'

 # TextInput

 Component for inputting textual values.

 <Playground>
  <TextInput label="Username" placeholder="johndoe" hint="the name you use to log in" />
 </Playground>

 ## Props

 <Props of={TextInput} />

 ## Usage Notes

 The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
 To use the component together with layouts, see the following examples.

 ### Inline

 The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could
 act as guide to the user on how long the expected input values are.

 <Playground>
  <form>
    I am <span style={{ display: 'inline-block', width: '16rem', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '24rem', }}><TextInput label="Address" hint="city, state and country" /></span>.
  </form>
 </Playground>

 ### Grid

 It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the
 element specified as `grid`. This is to be able to add complementing content to the components, if for example there are
 some content that is best displayed outside the component instead of putting in the `hint` prop.

 <Playground>
  <form
    style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
  >
    <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
      <TextInput label="Address line 1" hint="unit/house number, building" />
    </div>
    <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
      <TextInput label="Address line 2" hint="street, area" />
    </div>
    <div>
      <TextInput size="large" label="City/Town" />
    </div>
    <div>
      <TextInput size="large" label="State/Province" />
    </div>
    <div>
      <TextInput size="large" label="Country" hint="abbreviations are accepted" />
      <small>
        Consult the <a href="#">fees table</a> for shipping fee details.
      </small>
    </div>
  </form>
 </Playground>

 ## See Also

 - <Link to="../select">Select</Link> for a graphically-similar component suitable for selecting more values.
--- a/lib/services/isEmpty.test.ts
+++ b/lib/services/isEmpty.test.ts
@@ -1,42 +0,0 @@
 import * as fc from 'fast-check'
 import isEmpty from './isEmpty'

 describe('lib/services/isEmpty', () => {
  it('should exist', () => {
    expect(isEmpty).toBeDefined()
  })

  it('should be a function', () => {
    expect(isEmpty).toBeFunction()
  })

  it('should accept 1 argument', () => {
    expect(isEmpty).toHaveLength(1)
  })

  it('should return a boolean value', () => {
    fc.assert(
      fc.property(fc.anything(), (v) => {
        expect(typeof isEmpty(v)).toBe('boolean')
      }),
    )
  })

  describe('on arguments', () => {
    it('should return `true` on an argument with value of `undefined`', () => {
      expect(isEmpty(undefined)).toBe(true)
    })

    it('should return `true` on an argument with value of `null`', () => {
      expect(isEmpty(null)).toBe(true)
    })

    it('should return `false` on an argument with value that is neither `undefined` nor `null`', () => {
      fc.assert(
        fc.property(fc.anything().filter((v) => typeof v !== 'undefined' && v !== null), (v) => {
          expect(isEmpty(v)).toBe(false)
        }),
      )
    })
  })
 })
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
  "license": "MIT",
  "private": false,
  "devDependencies": {
    "@babel/runtime": "^7.12.5",
    "@reach/slider": "^0.10.5",
    "@rollup/plugin-typescript": "^5.0.2",
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -29,23 +31,20 @@
    "jest-axe": "3.4.0",
    "jest-enzyme": "7.1.2",
    "jest-extended": "0.11.5",
    "pascal-case": "3.1.1",
    "plop": "2.6.0",
    "prettier": "1.19.1",
    "react-is": "^16.13.1",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-feather": "2.0.3",
    "rollup": "^2.23.0",
    "rollup-plugin-peer-deps-external": "2.2.2",
    "rollup-plugin-terser": "5.3.0",
    "styled-components": "5.1.0",
    "ts-jest": "^26.1.3",
    "tslib": "^2.0.0",
    "typescript": "^3.9.7",
    "@reach/slider": "^0.10.5",
    "docz": "^2.3.1",
    "pascal-case": "3.1.1",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-feather": "2.0.3",
    "styled-components": "5.1.0"
    "typescript": "^3.9.7"
  },
  "scripts": {
    "prepublishOnly": "NODE_ENV=production rm -rf dist/ && rollup -c",
@@ -64,5 +63,6 @@
    "react-feather": "2.0.3",
    "styled-components": "5.1.0"
  },
  "homepage": "https://make.modal.sh/tesseract/web/react/common"
  "homepage": "https://make.modal.sh/tesseract/web/react/common",
  "dependencies": {}
 }
--- a/packages/react-common-docs/brand.tsx
+++ b/packages/react-common-docs/brand.tsx
@@ -0,0 +1,40 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import pkg from '../../package.json'

 const Base = styled('div')({
  position: 'relative',
 })

 const Title = styled('strong')({
  fontSize: '2rem',
  fontFamily: 'var(--font-family-headings), sans-serif',
  fontWeight: 'var(--font-weight-headings, 400)',
  lineHeight: 'var(--line-height-headings, 1.5)',
  fontStretch: 'var(--font-stretch-headings, normal)',
  textTransform: 'lowercase',
  whiteSpace: 'nowrap',
 })

 const Subtitle = styled('small')({
  position: 'absolute',
  bottom: '-1em',
  right: 0,
  fontWeight: 'bolder',
 })

 const Brand = () => {
  const name = pkg.name.includes('@') ? pkg.name.split('/')[1] : pkg.name
  return (
    <Base>
      <Title>
        {name}
      </Title>
      <Subtitle>
        v.{pkg.version}
      </Subtitle>
    </Base>
  )
 }

 export default Brand
--- a/packages/react-common-docs/next-env.d.ts
+++ b/packages/react-common-docs/next-env.d.ts
@@ -0,0 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 declare module 'remark-react'
--- a/packages/react-common-docs/next.config.js
+++ b/packages/react-common-docs/next.config.js
@@ -0,0 +1,25 @@
 const path = require('path')

 const withMDX = require('next-mdx-frontmatter')({
  extension: /\.mdx?$/
 })

 const e = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
 })

 module.exports = {
  ...e,
  webpack(...args) {
    const oldWebpack = e.webpack(...args)
    const [config, { defaultLoaders, }] = args

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: [path.resolve(__dirname, '../react-common/')],
      use: [defaultLoaders.babel],
    })

    return oldWebpack
  }
 }
--- a/packages/react-common-docs/package.json
+++ b/packages/react-common-docs/package.json
@@ -0,0 +1,26 @@
 {
  "name": "react-common-docs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "predev": "./scripts/docgen",
    "dev": "next dev",
    "prebuild": "./scripts/docgen",
    "build": "next build",
    "prestart": "./scripts/docgen",
    "start": "next start",
    "docgen": "./scripts/docgen"
  },
  "dependencies": {
    "@mdx-js/loader": "^1.6.19",
    "next": "10.0.1",
    "next-mdx-frontmatter": "^0.0.3",
    "pascal-case": "^3.1.1",
    "react-docgen-typescript": "^1.20.5",
    "react-live": "^2.2.3",
    "remark-parse": "^9.0.0",
    "remark-react": "^8.0.0",
    "styled-components": "^5.2.1",
    "unified": "^9.2.0"
  }
 }
--- a/packages/react-common-docs/public/favicon.ico
+++ b/packages/react-common-docs/public/favicon.ico
--- a/packages/react-common-docs/public/global.css
+++ b/packages/react-common-docs/public/global.css
@@ -0,0 +1,52 @@
 body {
  margin: 0;
 }

 h1 {
  font-size: 3em;
  text-transform: lowercase;
 }

 h2 {
  font-size: 2em;
  text-transform: lowercase;
 }

 h3 {
  font-size: 1.75em;
  text-transform: lowercase;
 }

 h4 {
  text-transform: lowercase;
 }

 h5 {
  text-transform: lowercase;
 }

 h6 {
  text-transform: lowercase;
 }

 p {
  margin: 2em 0;
 }

 small {
  font-size: 0.75em;
 }

 a:focus {
  color: var(--color-active);
  outline: 0;
 }

 ::selection {
  background-color: var(--color-active);
  color: var(--color-fg);
 }

 :root {
  caret-color: var(--color-active);
 }
--- a/packages/react-common-docs/public/theme/dark.css
+++ b/packages/react-common-docs/public/theme/dark.css
@@ -0,0 +1,138 @@
@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 400;
  src:
    local('Encode Sans Semi Expanded'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 700;
  src:
    local('Encode Sans Semi Expanded Bold'),
    local('Encode Sans Semi Expanded'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 100;
  src:
    local('Encode Sans Condensed Thin'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 200;
  src:
    local('Encode Sans Condensed ExtraLight'),
    local('Encode Sans Condensed Extra Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 300;
  src:
    local('Encode Sans Condensed Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
 }

 :root {
  --color-active: #f90;
  --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
  --font-stretch-base: semi-expanded;
  --font-weight-base: 400;
  --line-height-base: 2;
  --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
  --font-stretch-headings: condensed;
  --font-weight-headings: 100;
  --line-height-headings: 1.5;
  --font-family-monospace: 'mononoki';
  --font-size-root: 16px;
  --color-negative: #222;
  --color-positive: #eee;
  --color-accent: #C78AB3;
  --opacity-light: 0.25;
  --opacity-lighter: 0.5;
  --opacity-lightest: 0.75;
 }

 :root {
  --color-bg: var(--color-negative, white);
  --color-fg: var(--color-positive, black);
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--font-size-root);
  font-family: var(--font-family-base), sans-serif;
  font-stretch: var(--font-stretch-base, normal);
  font-weight: var(--font-weight-base, 400);
  line-height: var(--line-height-base, 2);
  transition-property: color, background-color;
  transition-timing-function: ease;
  transition-duration: 350ms;
 }

 h1 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h2 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h3 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h4 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h5 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h6 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 a {
  color: var(--color-accent);
 }

 code {
  font-family: var(--font-family-monospace), monospace;
 }

 pre {
  font-family: var(--font-family-monospace), monospace;
 }
--- a/packages/react-common-docs/public/theme/light.css
+++ b/packages/react-common-docs/public/theme/light.css
@@ -0,0 +1,146 @@
@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 400;
  src:
    local('Encode Sans Semi Expanded'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: semi-expanded;
  font-weight: 700;
  src:
    local('Encode Sans Semi Expanded Bold'),
    local('Encode Sans Semi Expanded'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 100;
  src:
    local('Encode Sans Condensed Thin'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 200;
  src:
    local('Encode Sans Condensed ExtraLight'),
    local('Encode Sans Condensed Extra Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
 }

@font-face {
  font-family: 'Encode Sans';
  font-stretch: condensed;
  font-weight: 300;
  src:
    local('Encode Sans Condensed Light'),
    local('Encode Sans Condensed'),
    local('Encode Sans');
 }

 :root {
  --color-negative: #eee;
  --color-positive: #222;
  --color-accent: #ba6a9c;
  --color-active: #f90;
  --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
  --font-stretch-base: semi-expanded;
  --font-weight-base: 400;
  --line-height-base: 2;
  --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
  --font-stretch-headings: condensed;
  --font-weight-headings: 100;
  --line-height-headings: 1.5;
  --font-family-monospace: 'mononoki';
  --font-size-root: 16px;
  --opacity-light: 0.5;
  --opacity-lighter: 0.75;
  --opacity-lightest: 0.875;
 }

 /*@media (prefers-color-scheme: dark) {*/
 /*  :root {*/
 /*    --color-negative: #222;*/
 /*    --color-positive: #eee;*/
 /*    --color-accent: #C78AB3;*/
 /*    --opacity-light: 0.25;*/
 /*    --opacity-lighter: 0.5;*/
 /*    --opacity-lightest: 0.75;*/
 /*  }*/
 /*}*/

 :root {
  --color-bg: var(--color-negative, white);
  --color-fg: var(--color-positive, black);
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--font-size-root);
  font-family: var(--font-family-base), sans-serif;
  font-stretch: var(--font-stretch-base, normal);
  font-weight: var(--font-weight-base, 400);
  line-height: var(--line-height-base, 2);
 }

 h1 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h2 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h3 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h4 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h5 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 h6 {
  font-family: var(--font-family-headings), sans-serif;
  font-stretch: var(--font-stretch-headings, normal);
  font-weight: var(--font-weight-headings, 400);
  line-height: var(--line-height-headings, 1.5);
 }

 a {
  color: var(--color-accent);
 }

 code {
  font-family: var(--font-family-monospace), monospace;
 }

 pre {
  font-family: var(--font-family-monospace), monospace;
 }
--- a/packages/react-common-docs/public/vercel.svg
+++ b/packages/react-common-docs/public/vercel.svg
@@ -0,0 +1,4 @@
 <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
    xmlns="http://www.w3.org/2000/svg">
    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
 </svg>
--- a/packages/react-common-docs/scripts/docgen
+++ b/packages/react-common-docs/scripts/docgen
@@ -0,0 +1,24 @@
 #!/usr/bin/env node

 const docgen = require('react-docgen-typescript')
 const path = require('path')
 const fs = require('fs')

 const componentsPath = path.resolve(__dirname, '..', '..', 'react-common', 'src', 'components')

 fs.readdir(componentsPath, (err, dir) => {
  const trueFilePaths = dir.map(d => path.resolve(__dirname, '..', '..', 'react-common', 'src', 'components', d, `${d}.tsx`))
  const docs = docgen.parse(
    trueFilePaths,
    {
      shouldExtractLiteralValuesFromEnum: true,
      shouldRemoveUndefinedFromOptional: true,
      propFilter: {
        skipPropsWithName: ['key', 'ref'],
      },
    }
  )
  fs.writeFile(path.resolve(__dirname, '..', 'src', 'docgen.json'), JSON.stringify(docs, null, 2), (err) => {

  })
 })
--- a/packages/react-common-docs/src/components/Header/Header.tsx
+++ b/packages/react-common-docs/src/components/Header/Header.tsx
@@ -0,0 +1,35 @@
 import * as React from 'react'
 import Head from 'next/head'
 import unified from 'unified'
 import parse from 'remark-parse'
 import remark2react from 'remark-react'
 import docgen from '../../docgen.json'

 const Header = ({ of: ofAttr }) => {
  const docs = docgen.find(d => d.displayName === ofAttr)

  if (!docs) {
    return null
  }

  return (
    <React.Fragment>
      <Head>
        <title>
          {docs.displayName} | React Common
        </title>
      </Head>
      <h1>{docs.displayName}</h1>
      <p>
        {
          unified()
            .use(parse)
            .use(remark2react)
            .processSync(docs.description).result
        }
      </p>
    </React.Fragment>
  )
 }

 export default Header
--- a/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx
+++ b/packages/react-common-docs/src/components/MenuGraphics/MenuGraphics.tsx
@@ -0,0 +1,50 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Icon } from '../../../../react-common/src'

 const Image = styled('img')({
  display: 'block',
  maxWidth: '100%',
  maxHeight: '100%',
 })

 export type MenuGraphicsKind = 'icon' | 'image'

 export const propTypes = {
  kind: PropTypes.oneOf<MenuGraphicsKind>(['icon', 'image']).isRequired,
  alt: PropTypes.string,
  id: PropTypes.string.isRequired,
 }

 type Props = PropTypes.InferProps<typeof propTypes>

 const MenuGraphics: React.FC<Props> = ({
  kind,
  alt,
  id,
 }) => {
  switch (kind) {
    case 'icon':
      return (
        <Icon
          name={id}
        />
      )
    case 'image':
      return (
        <Image
          src={id}
          alt={alt}
        />
      )
    default:
      break
  }

  return null
 }

 MenuGraphics.propTypes = propTypes

 export default MenuGraphics
--- a/packages/react-common-docs/src/components/Nav/Nav.tsx
+++ b/packages/react-common-docs/src/components/Nav/Nav.tsx
@@ -0,0 +1,91 @@
 import * as React from 'react'
 import Link from 'next/link'
 import styled from 'styled-components'
 import NavLink from '../NavLink/NavLink'

 const StyledLink = styled('a')({
  display: 'block',
  textDecoration: 'none',
 })

 const Container = styled('span')({
  display: 'flex',
  alignItems: 'center',
  padding: '0 1rem',
  height: '100%',
  margin: '0 0 0 auto',
  boxSizing: 'border-box',
  '@media (min-width: 720px)': {
    maxWidth: 'var(--max-width)',
  },
 })

 const HeaderContainer = styled(Container)({
  marginTop: '2rem',
 })

 const NavContainer = styled('div')({

 })

 const Nav = ({
  data,
 }) => {
  if (Array.isArray(data)) {
    return (
      <NavContainer>
        {
          data.map(d => (
            <Nav
              data={d}
            />
          ))
        }
      </NavContainer>
    )
  }
  if (typeof data === 'object') {
    const [entry] = Object.entries(data)
    const [key, value] = entry
    if (Array.isArray(value)) {
      return (
        <NavContainer>
          <HeaderContainer>
            {key}
          </HeaderContainer>
          {
            value.map(v => (
              <Nav
                data={v}
              />
            ))
          }
        </NavContainer>
      )
    }
    return (
      <Link
        href={value}
        passHref
      >
        <NavLink
          title={key}
          enclosingComponent={Container}
        />
      </Link>
    )
  }
  return (
    <Link
      href={data}
      passHref
    >
      <NavLink
        title={data}
        enclosingComponent={Container}
      />
    </Link>
  )
 }

 export default Nav
--- a/packages/react-common-docs/src/components/NavLink/NavLink.tsx
+++ b/packages/react-common-docs/src/components/NavLink/NavLink.tsx
@@ -0,0 +1,151 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Icon } from '../../../../react-common/src'
 import MenuGraphics, { propTypes as menuGraphicsPropTypes } from '../MenuGraphics/MenuGraphics'

 const Link = styled('a')({
  display: 'block',
  height: 'var(--size-link, 4rem)',
  textDecoration: 'none',
  position: 'relative',
  '::before': {
    display: 'block',
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'currentColor',
    opacity: 0,
    zIndex: -1,
  },
  '::after': {
    display: 'block',
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '0.25rem',
    height: '100%',
    backgroundColor: 'currentColor',
    opacity: 0,
    zIndex: -1,
  },
  ':hover::before': {
    opacity: 0.25,
  },
  ':hover::after': {
    opacity: 0.5,
  },
 })

 const LinkText = styled('span')({
  alignSelf: 'center',
  display: 'block',
  lineHeight: 1.25,
  gridColumnStart: 2,
  ':first-child': {
    gridColumnStart: 1,
  },
  ':last-child': {
    gridColumnEnd: 4,
  },
 })

 const LinkTitle = styled('strong')({
  display: 'block',
 })

 const LinkSubtitle = styled('span')({
  display: 'block',
 })

 const IndicatorContainer = styled('span')({
  alignSelf: 'center',
  lineHeight: 0,
 })

 const MenuGraphicsContainer = styled('span')({
  display: 'block',
  padding: '0.5rem',
  lineHeight: 0,
 })

 export const basePropTypes = {
  as: PropTypes.string,
  href: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string,
  graphics: PropTypes.shape(menuGraphicsPropTypes),
  indicator: PropTypes.string,
  onClick: PropTypes.func,
 }

 const propTypes = {
  ...basePropTypes,
  enclosingComponent: PropTypes.elementType,
  as: PropTypes.elementType,
 }

 type Props = PropTypes.InferProps<typeof propTypes>

 const NavLink = React.forwardRef<HTMLAnchorElement, Props>((
  {
    enclosingComponent: EnclosingComponent = React.Fragment,
    href,
    title,
    graphics,
    subtitle,
    indicator,
    onClick,
  },
  ref
 ) => (
  <Link
    ref={ref}
    href={href}
    onClick={onClick}
  >
    <EnclosingComponent>
      {
        graphics as object
        && (
          <MenuGraphicsContainer>
            <MenuGraphics
              {...graphics}
            />
          </MenuGraphicsContainer>
        )
      }
      <LinkText>
        <LinkTitle>
          {title}
        </LinkTitle>
        {
          subtitle as string
          && (
            <LinkSubtitle>
              {subtitle}
            </LinkSubtitle>
          )
        }
      </LinkText>
      {
        indicator as string
        && (
          <IndicatorContainer>
            <Icon
              name={indicator!}
            />
          </IndicatorContainer>
        )
      }
    </EnclosingComponent>
  </Link>
 ))

 NavLink.propTypes = propTypes

 export default NavLink
--- a/packages/react-common-docs/src/components/Playground/Playground.tsx
+++ b/packages/react-common-docs/src/components/Playground/Playground.tsx
@@ -0,0 +1,53 @@
 import * as React from 'react'
 import {
  LiveProvider,
  LiveEditor,
  LivePreview
 } from 'react-live'
 import styled from 'styled-components'

 const Figure = styled('figure')({
  margin: 0,
 })

 const StyledLiveEditor = styled(LiveEditor)({
  lineHeight: 1.125,
  fontFamily: 'var(--font-family-monospace), monospace !important',
  marginTop: '1rem',
 })

 const Playground = ({
  components,
  code,
  label,
 }) => {
  const indentLevel = code.indexOf('<') - 1
  const normalizedCode = code
    .split('\n')
    .map((s: string) => s.slice(indentLevel))
    .filter((s: string) => s.trim().length > 0)
    .join('\n')

  return (
    <Figure>
      {
        label
        && (
          <figcaption>
            {label}
          </figcaption>
        )
      }
      <div>
        <LiveProvider code={normalizedCode} scope={{
          ...components,
        }}>
          <LivePreview />
          <StyledLiveEditor />
        </LiveProvider>
      </div>
    </Figure>
  )
 }

 export default Playground
--- a/packages/react-common-docs/src/components/Props/Props.tsx
+++ b/packages/react-common-docs/src/components/Props/Props.tsx
@@ -0,0 +1,176 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import docgen from '../../docgen.json'

 const Base = styled('table')({
  borderCollapse: 'collapse',
  border: 0,
  display: 'block',
  '@media (min-width: 720px)': {
    display: 'table',
    margin: '0 -0.5rem',
  },
 })

 const HeaderCellGroup = styled('thead')({
  display: 'none',
  '@media (min-width: 720px)': {
    display: 'table-header-group',
  },
 })

 const HeaderRow = styled('tr')({
  display: 'block',
  margin: '2rem 0',
  '@media (min-width: 720px)': {
    display: 'table-row',
    margin: 0,
  },
 })

 const HeaderCell = styled('th')({
  verticalAlign: 'top',
  textAlign: 'left',
  fontSize: '0.75rem',
  fontWeight: 'bolder',
  textTransform: 'uppercase',
  border: 0,
  display: 'block',
  padding: 0,
  '@media (min-width: 720px)': {
    display: 'table-cell',
    padding: '0 0.5rem',
  },
 })

 const MainBodyCell = styled('th')({
  verticalAlign: 'top',
  textAlign: 'left',
  border: 0,
  lineHeight: 1,
  display: 'block',
  padding: 0,
  '@media (min-width: 720px)': {
    display: 'table-cell',
    padding: '0.5rem',
  },
 })

 const BodyCellGroup = styled('tbody')({
  display: 'block',
  '@media (min-width: 720px)': {
    display: 'table-row-group',
  },
 })

 const BodyCell = styled('td')({
  verticalAlign: 'top',
  padding: 0,
  border: 0,
  display: 'block',
  '&[data-column-name]::before': {
    display: 'inline',
    fontSize: '0.75rem',
    fontWeight: 'bolder',
    textTransform: 'uppercase',
    content: "attr(data-column-name) ':'",
    marginRight: '1rem',
  },
  '@media (min-width: 720px)': {
    padding: '0.5rem 0.5rem',
    display: 'table-cell',
    lineHeight: 1.25,
    '&[data-column-name]::before': {
      display: 'none',
    },
  },
 })

 const Code = styled('code')({
  display: 'inline-block',
 })

 const Props = ({ of: ofAttr }) => {
  const docs = docgen.find(d => d.displayName === ofAttr)

  if (!docs) {
    return null
  }

  return (
    <Base>
      <colgroup>
        <col width="20%" />
        <col width="25%" />
        <col width="25%" />
        <col width="*" />
      </colgroup>
      <HeaderCellGroup>
        <HeaderRow>
          <HeaderCell>
            Name
          </HeaderCell>
          <HeaderCell>
            Type
          </HeaderCell>
          <HeaderCell>
            Default
          </HeaderCell>
          <HeaderCell>
            Description
          </HeaderCell>
        </HeaderRow>
      </HeaderCellGroup>
      <BodyCellGroup>
        {
          Object.entries(docs.props).map(([name, def]) => (
            <HeaderRow>
              <MainBodyCell>
                <Code>
                  {def.required ? name : name + '?'}
                </Code>
              </MainBodyCell>
              <BodyCell
                data-column-name="Type"
              >
                {
                  def.type.name === 'enum'
                  && (
                    <Code>
                      {def.type.value.map(v => v.value).join(' | ')}
                    </Code>
                  )
                }
                {
                  def.type.name !== 'enum'
                  && (
                    <Code>
                      {def.type.name}
                    </Code>
                  )
                }
              </BodyCell>
              <BodyCell
                data-column-name={def.defaultValue ? 'Default' : undefined }
              >
                {
                  def.defaultValue
                  && (
                    <Code>
                      {JSON.stringify(def.defaultValue.value)}
                    </Code>
                  )
                }
              </BodyCell>
              <BodyCell>
                {def.description}
              </BodyCell>
            </HeaderRow>
          ))
        }
      </BodyCellGroup>
    </Base>
  )
 }

 export default Props
--- a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
+++ b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,186 @@
 import { Icon } from '../../../../react-common/src'
 import pkg from '../../../../../package.json'
 import styled from 'styled-components'
 import Link from 'next/link'
 import * as React from 'react'
 import Nav from '../Nav/Nav'

 const StyledLink = styled('a')({
  display: 'block',
  textDecoration: 'none',
  marginTop: '3rem',
  marginBottom: '3rem',
 })

 const Container = styled('span')({
  display: 'flex',
  alignItems: 'center',
  padding: '0 1rem',
  height: '2rem',
  margin: '0 0 0 auto',
  boxSizing: 'border-box',
  '@media (min-width: 720px)': {
    maxWidth: 'var(--max-width)',
  },
 })

 const Base = styled('aside')({
  '--max-width': 240,
  position: 'fixed',
  top: 0,
  left: '-100%',
  width: '100%',
  height: '100%',
  backgroundColor: 'var(--color-bg)',
  zIndex: 4,
  transitionProperty: 'color, background-color',
  transitionTimingFunction: 'ease',
  transitionDuration: '350ms',
  '@media (min-width: 720px)': {
    left: 0,
    width: `${100 / 4}%`,
    maxWidth: 'none',
    height: '100%',
    '+ *': {
      paddingLeft: `${100 / 4}%`,
      boxSizing: 'border-box',
    },
  },
 })

 const Actions = styled('div')({
  marginBottom: '4rem',
  display: 'flex',
  gap: '1rem',
  alignItems: 'center',
 })

 const ToggleWrapper = styled('label')({
  cursor: 'pointer',
  color: 'var(--color-accent)',
  display: 'inline-block',
 })

 const ToggleIcon = styled('span')({

 })

 const ToggleInput = styled('input')({
  position: 'absolute',
  left: -999999,
 })

 const NavWrapper = styled('nav')({
  '--size-link': '3rem',
 })

 const RepoLink = styled('a')({
  display: 'inline-grid',
  width: '1.5rem',
  height: '1.5rem',
  placeContent: 'center',
 })

 const Sidebar = ({
  data,
  brand: Brand,
  initialTheme = 'Dark',
 }) => {
  const [theme, setTheme] = React.useState(initialTheme)
  const toggleDarkMode = (b: string) => () => {
    setTheme(b)
  }

  React.useEffect(() => {
    let storageTheme = window.localStorage.getItem('tesseract-theme')
      || (
        window.matchMedia('(prefers-color-scheme: dark)').matches
          ? 'Dark'
          : 'Light'
      )
    window.localStorage.setItem('tesseract-theme', storageTheme)
    setTimeout(() => {
      setTheme(storageTheme)
    })
  }, [])

  React.useEffect(() => {
    window.localStorage.setItem('tesseract-theme', theme)
  }, [theme])

  React.useEffect(() => {
    const stylesheets = Array.from(window.document.querySelectorAll('link[title]')) as HTMLLinkElement[]
    stylesheets.forEach(s => {
      const enabled = s.title === theme
      s.setAttribute('rel', enabled ? 'stylesheet' : 'alternate stylesheet')
      if (enabled) {
        s.removeAttribute('disabled')
      } else {
        s.setAttribute('disabled', 'disabled')
      }
    })
  }, [theme])

  return (
    <Base>
      <NavWrapper>
        <Link
          href="/"
          passHref
        >
          <StyledLink>
            <Container>
              <Brand />
            </Container>
          </StyledLink>
        </Link>
        <Container>
          <Actions>
            <ToggleWrapper>
              <ToggleInput
                type="checkbox"
                defaultChecked={theme === 'Dark'}
                onChange={toggleDarkMode(theme === 'Dark' ? 'Light' : 'Dark')}
              />
              <ToggleIcon>
                {
                  theme === 'Dark'
                  && (
                    <Icon
                      label="Set Light Mode"
                      name="moon"
                    />
                  )
                }
                {
                  theme === 'Light'
                  && (
                    <Icon
                      label="Set Dark Mode"
                      name="sun"
                    />
                  )
                }
              </ToggleIcon>
            </ToggleWrapper>
            <RepoLink
              href={pkg.repository}
              target="_blank"
              rel="noopener noreferer"
            >
              <Icon
                name="code"
                label="Visit Repository"
              />
            </RepoLink>
          </Actions>
        </Container>
        <Nav
          data={data.nav}
        />
      </NavWrapper>
    </Base>
  )
 }

 export default Sidebar
--- a/packages/react-common-docs/src/docgen.json
+++ b/packages/react-common-docs/src/docgen.json
@@ -0,0 +1,694 @@
 [
  {
    "description": "Component for performing an action upon activation (e.g. when clicked).",
    "displayName": "Button",
    "methods": [],
    "props": {
      "size": {
        "defaultValue": {
          "value": "medium"
        },
        "description": "Size of the component.",
        "name": "size",
        "required": false,
        "type": {
          "name": "enum",
          "raw": "Size",
          "value": [
            {
              "value": "\"small\""
            },
            {
              "value": "\"medium\""
            },
            {
              "value": "\"large\""
            }
          ]
        }
      },
      "variant": {
        "defaultValue": {
          "value": "outline"
        },
        "description": "Variant of the component.",
        "name": "variant",
        "required": false,
        "type": {
          "name": "enum",
          "raw": "Variant",
          "value": [
            {
              "value": "\"outline\""
            },
            {
              "value": "\"primary\""
            }
          ]
        }
      },
      "children": {
        "defaultValue": null,
        "description": "Text to identify the action associated upon activation of the component.",
        "name": "children",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "disabled": {
        "defaultValue": {
          "value": false
        },
        "description": "Can the component be activated?",
        "name": "disabled",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "element": {
        "defaultValue": {
          "value": "button"
        },
        "description": "The corresponding HTML element of the component.",
        "name": "element",
        "required": false,
        "type": {
          "name": "enum",
          "raw": "ButtonElement",
          "value": [
            {
              "value": "\"a\""
            },
            {
              "value": "\"button\""
            }
          ]
        }
      },
      "href": {
        "defaultValue": null,
        "description": "The URL of the page to navigate to, if element is set to \"a\".",
        "name": "href",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "target": {
        "defaultValue": null,
        "description": "The target on where to display the page navigated to, if element is set to \"a\".",
        "name": "target",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "rel": {
        "defaultValue": null,
        "description": "The relationship of the current page to the referred page in \"href\", if element is set to \"a\".",
        "name": "rel",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "type": {
        "defaultValue": {
          "value": "button"
        },
        "description": "The type of the button, if element is set to \"button\".",
        "name": "type",
        "required": false,
        "type": {
          "name": "enum",
          "raw": "ButtonType",
          "value": [
            {
              "value": "\"button\""
            },
            {
              "value": "\"submit\""
            },
            {
              "value": "\"reset\""
            }
          ]
        }
      },
      "border": {
        "defaultValue": {
          "value": false
        },
        "description": "Does the button display a border?",
        "name": "border",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "onClick": {
        "defaultValue": null,
        "description": "Event handler triggered when the component is clicked.",
        "name": "onClick",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "onFocus": {
        "defaultValue": null,
        "description": "Event handler triggered when the component receives focus.",
        "name": "onFocus",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "onBlur": {
        "defaultValue": null,
        "description": "Event handler triggered when the component loses focus.",
        "name": "onBlur",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      }
    }
  },
  {
    "description": "Component for values that have an on/off state.",
    "displayName": "Checkbox",
    "methods": [],
    "props": {
      "onFocus": {
        "defaultValue": null,
        "description": "Event handler triggered when the component receives focus.",
        "name": "onFocus",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "onBlur": {
        "defaultValue": null,
        "description": "Event handler triggered when the component loses focus.",
        "name": "onBlur",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "label": {
        "defaultValue": {
          "value": ""
        },
        "description": "Short textual description indicating the nature of the component's value.",
        "name": "label",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "name": {
        "defaultValue": null,
        "description": "Name of the form field associated with this component.",
        "name": "name",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "onChange": {
        "defaultValue": null,
        "description": "Event handler triggered when the component is toggled.",
        "name": "onChange",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      }
    }
  },
  {
    "description": "Component for displaying graphics.",
    "displayName": "Icon",
    "methods": [],
    "props": {
      "size": {
        "defaultValue": {
          "value": "1.5rem"
        },
        "description": "Size of the icon. This controls both the width and the height.",
        "name": "size",
        "required": false,
        "type": {
          "name": "ReactText"
        }
      },
      "label": {
        "defaultValue": {
          "value": null
        },
        "description": "Describe of what the component represents.",
        "name": "label",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "name": {
        "defaultValue": null,
        "description": "Name of the icon to display.",
        "name": "name",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "weight": {
        "defaultValue": {
          "value": "0.125rem"
        },
        "description": "Width of the icon's strokes.",
        "name": "weight",
        "required": false,
        "type": {
          "name": "ReactText"
        }
      }
    }
  },
  {
    "description": "Component for values which are to be selected from a few list of options.",
    "displayName": "RadioButton",
    "methods": [],
    "props": {
      "onFocus": {
        "defaultValue": null,
        "description": "Event handler triggered when the component receives focus.",
        "name": "onFocus",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "onBlur": {
        "defaultValue": null,
        "description": "Event handler triggered when the component loses focus.",
        "name": "onBlur",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "label": {
        "defaultValue": {
          "value": ""
        },
        "description": "Short textual description indicating the nature of the component's value.",
        "name": "label",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "name": {
        "defaultValue": null,
        "description": "Group where the component belongs.",
        "name": "name",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "onChange": {
        "defaultValue": null,
        "description": "Event handler triggered when the component is selected.",
        "name": "onChange",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      }
    }
  },
  {
    "description": "Component for selecting values from a larger number of options.",
    "displayName": "Select",
    "methods": [],
    "props": {
      "size": {
        "defaultValue": {
          "value": "medium"
        },
        "description": "Size of the component.",
        "name": "size",
        "required": false,
        "type": {
          "name": "enum",
          "raw": "Size",
          "value": [
            {
              "value": "\"small\""
            },
            {
              "value": "\"medium\""
            },
            {
              "value": "\"large\""
            }
          ]
        }
      },
      "disabled": {
        "defaultValue": {
          "value": false
        },
        "description": "Is the component active?",
        "name": "disabled",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "border": {
        "defaultValue": {
          "value": false
        },
        "description": "Does the button display a border?",
        "name": "border",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "onFocus": {
        "defaultValue": null,
        "description": "Event handler triggered when the component receives focus.",
        "name": "onFocus",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "onBlur": {
        "defaultValue": null,
        "description": "Event handler triggered when the component loses focus.",
        "name": "onBlur",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "label": {
        "defaultValue": {
          "value": ""
        },
        "description": "Short textual description indicating the nature of the component's value.",
        "name": "label",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "name": {
        "defaultValue": null,
        "description": "Name of the form field associated with this component.",
        "name": "name",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "onChange": {
        "defaultValue": null,
        "description": "Event handler triggered when the component changes value.",
        "name": "onChange",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "hint": {
        "defaultValue": {
          "value": ""
        },
        "description": "Short textual description as guidelines for valid input values.",
        "name": "hint",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "multiple": {
        "defaultValue": {
          "value": false
        },
        "description": "Can multiple values be selected?",
        "name": "multiple",
        "required": false,
        "type": {
          "name": "boolean"
        }
      }
    }
  },
  {
    "description": "Component for inputting numeric values in a graphical manner.\n\nThe component is styled using client-side scripts. When the component is rendered server-side,\nthe component falls back into the original `<input type=\"range\">` element.",
    "displayName": "Slider",
    "methods": [],
    "props": {
      "disabled": {
        "defaultValue": {
          "value": false
        },
        "description": "Is the component active?",
        "name": "disabled",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "label": {
        "defaultValue": {
          "value": ""
        },
        "description": "Short textual description indicating the nature of the component's value.",
        "name": "label",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "onChange": {
        "defaultValue": null,
        "description": "Event handler triggered when the component changes value.",
        "name": "onChange",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "orientation": {
        "defaultValue": {
          "value": "horizontal"
        },
        "description": "The component orientation.",
        "name": "orientation",
        "required": false,
        "type": {
          "name": "enum",
          "raw": "Orientation",
          "value": [
            {
              "value": "\"vertical\""
            },
            {
              "value": "\"horizontal\""
            }
          ]
        }
      },
      "length": {
        "defaultValue": {
          "value": "16rem"
        },
        "description": "CSS size for the component length.",
        "name": "length",
        "required": false,
        "type": {
          "name": "ReactText"
        }
      }
    }
  },
  {
    "description": "Component for inputting textual values.",
    "displayName": "TextInput",
    "methods": [],
    "props": {
      "size": {
        "defaultValue": {
          "value": "medium"
        },
        "description": "Size of the component.",
        "name": "size",
        "required": false,
        "type": {
          "name": "enum",
          "raw": "Size",
          "value": [
            {
              "value": "\"small\""
            },
            {
              "value": "\"medium\""
            },
            {
              "value": "\"large\""
            }
          ]
        }
      },
      "disabled": {
        "defaultValue": {
          "value": false
        },
        "description": "Is the component active?",
        "name": "disabled",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "border": {
        "defaultValue": {
          "value": false
        },
        "description": "Does the button display a border?",
        "name": "border",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "onFocus": {
        "defaultValue": null,
        "description": "Event handler triggered when the component receives focus.",
        "name": "onFocus",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "onBlur": {
        "defaultValue": null,
        "description": "Event handler triggered when the component loses focus.",
        "name": "onBlur",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "label": {
        "defaultValue": {
          "value": ""
        },
        "description": "Short textual description indicating the nature of the component's value.",
        "name": "label",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "onChange": {
        "defaultValue": null,
        "description": "Event handler triggered when the component changes value.",
        "name": "onChange",
        "required": false,
        "type": {
          "name": "(...args: any[]) => any"
        }
      },
      "hint": {
        "defaultValue": {
          "value": ""
        },
        "description": "Short textual description as guidelines for valid input values.",
        "name": "hint",
        "required": false,
        "type": {
          "name": "any"
        }
      },
      "indicator": {
        "defaultValue": {
          "value": null
        },
        "description": "Additional description, usually graphical, indicating the nature of the component's value.",
        "name": "indicator",
        "required": false,
        "type": {
          "name": "ReactNodeLike"
        }
      },
      "multiline": {
        "defaultValue": {
          "value": false
        },
        "description": "Should the component accept multiple lines of input?",
        "name": "multiline",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "autoResize": {
        "defaultValue": {
          "value": false
        },
        "description": "Should the component resize itself to show all its value?",
        "name": "autoResize",
        "required": false,
        "type": {
          "name": "boolean"
        }
      },
      "placeholder": {
        "defaultValue": {
          "value": ""
        },
        "description": "Placeholder of the component when there is no value.",
        "name": "placeholder",
        "required": false,
        "type": {
          "name": "string"
        }
      },
      "rows": {
        "defaultValue": {
          "value": 3
        },
        "description": "How many rows should the component display if it accepts multiline input?",
        "name": "rows",
        "required": false,
        "type": {
          "name": "number"
        }
      },
      "alternate": {
        "defaultValue": {
          "value": false
        },
        "description": "Should the component be displayed with an alternate appearance?",
        "name": "alternate",
        "required": false,
        "type": {
          "name": "boolean"
        }
      }
    }
  }
 ]
--- a/packages/react-common-docs/src/pages/_app.tsx
+++ b/packages/react-common-docs/src/pages/_app.tsx
@@ -0,0 +1,40 @@
 import * as React from 'react'
 import styled from 'styled-components'
 import sidebar from '../sidebar.json'
 import brand from '../../brand'
 import Sidebar from '../components/Sidebar/Sidebar'
 import '../../public/global.css'
 import '../../public/theme/dark.css'

 const Container = styled('div')({
  maxWidth: 720,
  margin: '0 auto',
  padding: '0 1rem',
  boxSizing: 'border-box',
 })

 type AppProps = {
  Component: React.ElementType,
  pageProps: Record<string, unknown>,
 }

 const App: React.FC<AppProps> = ({
  Component,
  pageProps,
 }) => (
  <React.Fragment>
    <Sidebar
      brand={brand}
      data={sidebar}
    />
    <main>
      <Container>
        <Component
          {...pageProps}
        />
      </Container>
    </main>
  </React.Fragment>
 )

 export default App
--- a/packages/react-common-docs/src/pages/_document.tsx
+++ b/packages/react-common-docs/src/pages/_document.tsx
@@ -0,0 +1,45 @@
 import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'

 export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            <link rel="stylesheet" href="/global.css" />
            <link rel="stylesheet" title="Dark" href="/theme/dark.css" />
            <link rel="alternate stylesheet" title="Light" href="/theme/light.css" />
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }

  render() {
    return (
      <Html lang="en-PH">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
 }
--- a/packages/react-common-docs/src/pages/components/Button.mdx
+++ b/packages/react-common-docs/src/pages/components/Button.mdx
@@ -1,23 +1,26 @@
 ---
 name: Button
 route: /components/button
 menu: Components
 title: Button
 ---

 import { Playground, Props } from 'docz'
 import Button from './Button'
 import { Button } from '../../../../react-common/src'
 import Playground from '../../components/Playground/Playground'
 import Props from '../../components/Props/Props'
 import Header from '../../components/Header/Header'

 # Button
 <Header of="Button" />

 Component for performing an action upon activation (e.g. when clicked).

 <Playground>
  <Button>Perform Action</Button>
 </Playground>
 <Playground
  code={`
    <Button>
      Perform Action
    </Button>
  `}
  components={{ Button }}
 />

 ## Props

 <Props of={Button} />
 <Props of="Button" />

 ## Usage Notes

--- a/packages/react-common-docs/src/pages/components/Checkbox.mdx
+++ b/packages/react-common-docs/src/pages/components/Checkbox.mdx
@@ -0,0 +1,26 @@
 ---
 name: Checkbox
 ---

 import { Checkbox } from '../../../../react-common/src'
 import Playground from '../../components/Playground/Playground'
 import Props from '../../components/Props/Props'
 import Header from '../../components/Header/Header'

 <Header of="Checkbox" />

 <Playground
  components={{ Checkbox }}
  code={`
    <Checkbox label="Accept Terms" />
  `}
 />

 ## Props

 <Props of="Checkbox" />

 ## See Also

 - [Select](./Select) for a similar component suitable for selecting more values.
 - [RadioButton](./RadioButton) for a similar component on selecting a single value among very few choices.
--- a/packages/react-common-docs/src/pages/components/Icon.mdx
+++ b/packages/react-common-docs/src/pages/components/Icon.mdx
@@ -0,0 +1,21 @@
 ---
 name: Icon
 ---

 import { Icon } from '../../../../react-common/src'
 import Playground from '../../components/Playground/Playground'
 import Props from '../../components/Props/Props'
 import Header from '../../components/Header/Header'

 <Header of="Icon" />

 <Playground
  components={{ Icon }}
  code={`
    <Icon name="check" label="OK" size="1.5rem" weight={0.125} />
  `}
 />

 ## Props

 <Props of="Icon" />
--- a/packages/react-common-docs/src/pages/components/RadioButton.mdx
+++ b/packages/react-common-docs/src/pages/components/RadioButton.mdx
@@ -0,0 +1,33 @@
 ---
 name: RadioButton
 ---

 import { RadioButton } from '../../../../react-common/src'
 import Playground from '../../components/Playground/Playground'
 import Props from '../../components/Props/Props'
 import Header from '../../components/Header/Header'

 <Header of="RadioButton" />

 <Playground
  components={{ RadioButton }}
  code={`
    <div style={{ display: 'grid', gap: '1rem', }}>
      <div>
        <RadioButton name="flavor" label="Chocolate" />
      </div>
      <div>
        <RadioButton name="flavor" label="Vanilla" />
      </div>
    </div>
  `}
 />

 ## Props

 <Props of="RadioButton" />

 ## See Also

 - [Checkbox](./Checkbox) for a similar component on selecting values among very few choices.
 - [Select](./Select) for a similar component suitable for selecting more values.
--- a/packages/react-common-docs/src/pages/components/Select.mdx
+++ b/packages/react-common-docs/src/pages/components/Select.mdx
@@ -0,0 +1,46 @@
 ---
 name: Select
 ---

 import { Select } from '../../../../react-common/src'
 import Playground from '../../components/Playground/Playground'
 import Props from '../../components/Props/Props'
 import Header from '../../components/Header/Header'

 <Header of="Select" />

 <Playground
  components={{ Select }}
  code={`
    <Select>
      <optgroup
        label="Fruits"
      >
        <option value="mango">Mango</option>
        <option value="strawberry">Strawberry</option>
        <option value="blueberry">Blueberry</option>
      </optgroup>
      <optgroup
        label="Classic"
      >
        <option value="chocolate">Chocolate</option>
        <option value="vanilla">Vanilla</option>
      </optgroup>
    </Select>
  `}
 />

 ## Props

 <Props of="Select" />

 ## Usage Notes

 The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
 To use the component together with layouts, see [TextInput](./TextInput) for examples. Both `Select` and
 `TextInput` have similar strategies on usage with layouts.

 ## See Also

 - [Checkbox](./Checkbox) for a similar component on selecting values among very few choices.
 - [RadioButton](./RadioButton) for a similar component on selecting a single value among very few choices.
--- a/packages/react-common-docs/src/pages/components/Slider.mdx
+++ b/packages/react-common-docs/src/pages/components/Slider.mdx
@@ -0,0 +1,25 @@
 ---
 name: Slider
 ---

 import { Slider } from '../../../../react-common/src'
 import Playground from '../../components/Playground/Playground'
 import Props from '../../components/Props/Props'
 import Header from '../../components/Header/Header'

 <Header of="Slider" />

 <Playground
  components={{ Slider }}
  code={`
    <Slider />
  `}
 />

 ## Props

 <Props of="Slider" />

 ## See Also

 - [Reach UI Slider](//reacttraining.com/reach-ui/slider/#sliderinput) for the client-side implementation.
--- a/packages/react-common-docs/src/pages/components/TextInput.mdx
+++ b/packages/react-common-docs/src/pages/components/TextInput.mdx
@@ -0,0 +1,82 @@
 ---
 name: TextInput
 ---

 import { TextInput } from '../../../../react-common/src'
 import Playground from '../../components/Playground/Playground'
 import Props from '../../components/Props/Props'
 import Header from '../../components/Header/Header'

 <Header of="TextInput" />

 <Playground
  components={{ TextInput }}
  code={`
    <TextInput
      label="Username"
      placeholder="johndoe"
      hint="the name you use to log in"
    />
  `}
 />

 ## Props

 <Props of="TextInput" />

 ## Usage Notes

 The component will behave as `block`, i.e. it takes the remaining of the horizontal space.
 To use the component together with layouts, see the following examples.

 ### Inline

 The components are surrounded by `inline-block` elements. These surrounding elements have specified widths, which could
 act as guide to the user on how long the expected input values are.

 <Playground
  components={{ TextInput }}
  code={`
    <form>
      I am <span style={{ display: 'inline-block', width: '16rem', verticalAlign: 'bottom', }}><TextInput label="Full name" hint="given and family name" /></span> and I live in <span style={{ display: 'inline-block', width: '24rem', verticalAlign: 'bottom', }}><TextInput label="Address" hint="city, state and country" /></span>.
    </form>
  `}
 />

 ### Grid

 It is advisable to put surrounding elements instead of the `TextInput` components themselves as children of the
 element specified as `grid`. This is to be able to add complementing content to the components, if for example there are
 some content that is best displayed outside the component instead of putting in the `hint` prop.

 <Playground
  components={{ TextInput }}
  code={`
    <form
      style={{ display: 'grid', gridTemplateColumns: '4fr 4fr 5fr', gap: '1rem', }}
    >
      <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
        <TextInput alternate border label="Address line 1" hint="unit/house number, building" />
      </div>
      <div style={{ gridColumnStart: 1, gridColumnEnd: 4, }}>
        <TextInput alternate border label="Address line 2" hint="street, area" />
      </div>
      <div>
        <TextInput alternate border size="large" label="City/Town" />
      </div>
      <div>
        <TextInput alternate border size="large" label="State/Province" />
      </div>
      <div>
        <TextInput alternate border size="large" label="Country" hint="abbreviations are accepted" />
        <small>
          Consult the <a href="#">fees table</a> for shipping fee details.
        </small>
      </div>
    </form>
  `}
 />

 ## See Also

 - [Select](./Select) for a graphically-similar component suitable for selecting more values.
--- a/packages/react-common-docs/src/pages/index.md
+++ b/packages/react-common-docs/src/pages/index.md
@@ -0,0 +1,91 @@
 # Tesseract Web - React Common

 Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org).

 Package:

 [![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
 [![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)

 Dependencies:

 [![React](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=react&kind=peerDependencies)](https://github.com/facebook/react)
 [![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=peerDependencies)](https://github.com/styled-components/styled-components)
 [![TypeScript](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=typescript&kind=devDependencies)](https://github.com/microsoft/typescript)
 [![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
 [![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)

 ## Installation

 Since this package resides in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/), you may need to
 adjust configuration in your chosen package manager.

 With [Yarn](https://yarnpkg.com), add this to your `.yarnrc` file:

 ```
 "@tesseract-design:registry" "https://js.pack.modal.sh/"
 ```

 Then, install the package by running the following command:

 ```shell script
 yarn add @tesseract-design/react-common
 ```

 ## Usage

 The package includes components as named exports. Simply import the components you need individually or use a namespace
 import, like so:

 ```jsx harmony
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import * as T from '@tesseract-design/react-common'

 const LoginForm = etcProps => (
  <form
    {...etcProps}
  >
    <fieldset>
      <legend>
        Log In
      </legend>
      <div>
        <T.TextInput
          block
          label="Username"
        />
      </div>
      <div>
        <T.TextInput
          block
          type="password"
          label="Password"
        />
      </div>
      <div>
        <T.Button>
          Log In
        </T.Button>
      </div>
    </fieldset>
  </form>
 )

 const mountNode = window.document.createElement('div')

 ReactDOM.render(
  <LoginForm />,
  mountNode,
 )

 window.document.body.appendChild(mountNode)
 ```

 Detailed usage guides can be found in the [Tesseract Design - React Common documentation](https://make.modal.sh/tesseract/web/react/common).

 ## TypeScript

 The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
 compiled source.

--- a/packages/react-common-docs/src/pages/theming.md
+++ b/packages/react-common-docs/src/pages/theming.md
@@ -1,6 +1,5 @@
 ---
 name: Theming
 route: /theming
 ---

 # Theming
--- a/packages/react-common-docs/src/sidebar.json
+++ b/packages/react-common-docs/src/sidebar.json
@@ -0,0 +1,18 @@
 {
  "nav": [
    {
      "Theming": "/theming"
    },
    {
      "Components": [
        { "Button": "/components/Button" },
        { "Checkbox": "/components/Checkbox" },
        { "Icon": "/components/Icon" },
        { "RadioButton": "/components/RadioButton" },
        { "Select": "/components/Select" },
        { "Slider": "/components/Slider" },
        { "TextInput": "/components/TextInput" }
      ]
    }
  ]
 }
--- a/packages/react-common-docs/tsconfig.json
+++ b/packages/react-common-docs/tsconfig.json
@@ -0,0 +1,37 @@
 {
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "declaration": true,
    "declarationDir": "./dist",
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "**/*.test.ts",
    "**/*.test.tsx",
    "utilities/**/*",
    "jest.setup.ts"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
 }
--- a/packages/react-common-docs/yarn.lock
+++ b/packages/react-common-docs/yarn.lock
--- a/packages/react-common/src/components/Button/Button.test.tsx
+++ b/packages/react-common/src/components/Button/Button.test.tsx
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../../../utilities/jest/extensions.ts" />
 /// <reference path="../../../../../utilities/jest/extensions.ts" />

 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'
--- a/packages/react-common/src/components/Button/Button.tsx
+++ b/packages/react-common/src/components/Button/Button.tsx
@@ -172,6 +172,9 @@ const propTypes = {

 type Props = PropTypes.InferProps<typeof propTypes>

 /**
 * Component for performing an action upon activation (e.g. when clicked).
 */
 const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement, Props>(
  (
    {
--- a/packages/react-common/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-common/src/components/Checkbox/Checkbox.test.tsx
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../../../utilities/jest/extensions.ts" />
 /// <reference path="../../../../../utilities/jest/extensions.ts" />

 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'
--- a/packages/react-common/src/components/Checkbox/Checkbox.tsx
+++ b/packages/react-common/src/components/Checkbox/Checkbox.tsx
--- a/packages/react-common/src/components/Icon/Icon.test.tsx
+++ b/packages/react-common/src/components/Icon/Icon.test.tsx
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../../../utilities/jest/extensions.ts" />
 /// <reference path="../../../../../utilities/jest/extensions.ts" />

 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'
--- a/packages/react-common/src/components/Icon/Icon.tsx
+++ b/packages/react-common/src/components/Icon/Icon.tsx
@@ -43,6 +43,14 @@ const propTypes = {

 type Props = PropTypes.InferProps<typeof propTypes>

 /**
 * Component for displaying graphics.
 * @param name
 * @param weight
 * @param size
 * @param label
 * @constructor
 */
 const Icon: React.FC<Props> = ({ name, weight = '0.125rem', size = '1.5rem', label = name }) => {
  const iconName = pascalCase(name, { transform: pascalCaseTransformMerge })
  const { [iconName as keyof typeof FeatherIcon]: TheIcon = null } = FeatherIcon
--- a/packages/react-common/src/components/RadioButton/RadioButton.test.tsx
+++ b/packages/react-common/src/components/RadioButton/RadioButton.test.tsx
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../../../utilities/jest/extensions.ts" />
 /// <reference path="../../../../../utilities/jest/extensions.ts" />

 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'
--- a/packages/react-common/src/components/RadioButton/RadioButton.tsx
+++ b/packages/react-common/src/components/RadioButton/RadioButton.tsx
--- a/packages/react-common/src/components/Select/Select.test.tsx
+++ b/packages/react-common/src/components/Select/Select.test.tsx
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../../../utilities/jest/extensions.ts" />
 /// <reference path="../../../../../utilities/jest/extensions.ts" />

 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'
--- a/packages/react-common/src/components/Select/Select.tsx
+++ b/packages/react-common/src/components/Select/Select.tsx
@@ -218,6 +218,9 @@ const propTypes = {

 type Props = PropTypes.InferProps<typeof propTypes>

 /**
 * Component for selecting values from a larger number of options.
 */
 const Select = React.forwardRef<HTMLSelectElement, Props>(
  (
    {
--- a/packages/react-common/src/components/Slider/Slider.test.tsx
+++ b/packages/react-common/src/components/Slider/Slider.test.tsx
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../../../utilities/jest/extensions.ts" />
 /// <reference path="../../../../../utilities/jest/extensions.ts" />

 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'
--- a/packages/react-common/src/components/Slider/Slider.tsx
+++ b/packages/react-common/src/components/Slider/Slider.tsx
--- a/packages/react-common/src/components/TextInput/TextInput.test.tsx
+++ b/packages/react-common/src/components/TextInput/TextInput.test.tsx
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../../../utilities/jest/extensions.ts" />
 /// <reference path="../../../../../utilities/jest/extensions.ts" />

 import * as fc from 'fast-check'
 import * as Enzyme from 'enzyme'
--- a/packages/react-common/src/components/TextInput/TextInput.tsx
+++ b/packages/react-common/src/components/TextInput/TextInput.tsx
@@ -4,6 +4,8 @@ import styled from 'styled-components'
 import stringify from '../../services/stringify'
 import { Size, SizeMap } from '../../services/utilities'

 // TODO implement web-client text inputs!

 const MIN_HEIGHTS: SizeMap<string | number> = {
  small: '2.5rem',
  medium: '3rem',
@@ -60,7 +62,6 @@ const LabelWrapper = styled('span')({
  position: 'absolute',
  top: 0,
  left: 0,
  paddingLeft: '0.5rem',
  fontSize: '0.85em',
  maxWidth: '100%',
  overflow: 'hidden',
@@ -118,7 +119,6 @@ const Input = styled('input')({
  position: 'relative',
  border: 0,
  borderRadius: 'inherit',
  paddingLeft: '1rem',
  margin: 0,
  font: 'inherit',
  minHeight: '4rem',
@@ -148,7 +148,6 @@ const TextArea = styled('textarea')({
  position: 'relative',
  border: 0,
  borderRadius: 'inherit',
  paddingLeft: '1rem',
  margin: 0,
  font: 'inherit',
  minHeight: '4rem',
@@ -166,9 +165,7 @@ TextArea.displayName = 'textarea'
 const HintWrapper = styled('span')({
  boxSizing: 'border-box',
  position: 'absolute',
  bottom: 0,
  left: 0,
  paddingLeft: '1rem',
  fontSize: '0.85em',
  opacity: 0.5,
  maxWidth: '100%',
@@ -250,10 +247,17 @@ const propTypes = {
   * Event handler triggered when the component loses focus.
   */
  onBlur: PropTypes.func,
  /**
   * Should the component be displayed with an alternate appearance?
   */
  alternate: PropTypes.bool,
 }

 type Props = PropTypes.InferProps<typeof propTypes>

 /**
 * Component for inputting textual values.
 */
 const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props>(
  (
    {
@@ -270,6 +274,7 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
      onChange,
      onFocus,
      onBlur,
      alternate = false,
      ...etcProps
    },
    ref,
@@ -283,6 +288,7 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
      <CaptureArea>
        <LabelWrapper
          style={{
            paddingLeft: alternate ? '0.5rem' : undefined,
            paddingTop: LABEL_VERTICAL_PADDING_SIZES[size!],
            paddingBottom: LABEL_VERTICAL_PADDING_SIZES[size!],
            paddingRight: indicator ? MIN_HEIGHTS[size!] : '0.5rem',
@@ -306,9 +312,10 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
              height: `calc(${MIN_HEIGHTS[size!]} * ${rows})`,
              fontSize: INPUT_FONT_SIZES[size!],
              minHeight: MIN_HEIGHTS[size!],
              paddingTop: VERTICAL_PADDING_SIZES[size!],
              paddingTop: alternate ? VERTICAL_PADDING_SIZES[size!] : `calc(${SECONDARY_TEXT_SIZES[size!]} * 2)`,
              paddingBottom: VERTICAL_PADDING_SIZES[size!],
              paddingRight: indicator ? MIN_HEIGHTS[size!] : '1rem',
              paddingRight: indicator ? MIN_HEIGHTS[size!] : (alternate ? '1rem' : undefined),
              paddingLeft: alternate ? '1rem' : undefined,
            }}
          />
        )}
@@ -322,9 +329,11 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
            ref={ref as React.Ref<HTMLInputElement>}
            disabled={disabled!}
            style={{
              paddingLeft: alternate ? '1rem' : undefined,
              fontSize: INPUT_FONT_SIZES[size!],
              minHeight: MIN_HEIGHTS[size!],
              paddingRight: indicator ? MIN_HEIGHTS[size!] : '1rem',
              paddingTop: alternate ? undefined : `calc(${SECONDARY_TEXT_SIZES[size!]} * 2)`,
              paddingRight: indicator ? MIN_HEIGHTS[size!] : (alternate ? '1rem' : undefined),
            }}
          />
        )}
@@ -333,6 +342,9 @@ const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, Props
      {stringify(hint).length > 0 && (
        <HintWrapper
          style={{
            top: alternate ? undefined : '0.75rem',
            bottom: alternate ? 0 : undefined,
            paddingLeft: alternate ? '1rem' : undefined,
            paddingTop: LABEL_VERTICAL_PADDING_SIZES[size!],
            paddingBottom: LABEL_VERTICAL_PADDING_SIZES[size!],
            paddingRight: indicator ? MIN_HEIGHTS[size!] : '1rem',
--- a/packages/react-common/src/index.test.ts
+++ b/packages/react-common/src/index.test.ts
@@ -1,5 +1,5 @@
 /// <reference types="jest-enzyme" />
 /// <reference path="../utilities/jest/extensions.ts" />
 /// <reference path="../../../utilities/jest/extensions.ts" />

 import * as T from './index'

--- a/packages/react-common/src/index.ts
+++ b/packages/react-common/src/index.ts
--- a/packages/react-common/src/services/isEmpty.test.ts
+++ b/packages/react-common/src/services/isEmpty.test.ts
@@ -0,0 +1,40 @@
 import * as fc from 'fast-check'
 import isEmpty from './isEmpty'

 it('should exist', () => {
  expect(isEmpty).toBeDefined()
 })

 it('should be a function', () => {
  expect(typeof isEmpty).toBe('function')
 })

 it('should accept 1 argument', () => {
  expect(isEmpty).toHaveLength(1)
 })

 it('should return a boolean value', () => {
  fc.assert(
    fc.property(fc.anything(), (v) => {
      expect(typeof isEmpty(v)).toBe('boolean')
    }),
  )
 })

 describe('on arguments', () => {
  it('should return `true` on an argument with value of `undefined`', () => {
    expect(isEmpty(undefined)).toBe(true)
  })

  it('should return `true` on an argument with value of `null`', () => {
    expect(isEmpty(null)).toBe(true)
  })

  it('should return `false` on an argument with value that is neither `undefined` nor `null`', () => {
    fc.assert(
      fc.property(fc.anything().filter((v) => typeof v !== 'undefined' && v !== null), (v) => {
        expect(isEmpty(v)).toBe(false)
      }),
    )
  })
 })
--- a/packages/react-common/src/services/isEmpty.ts
+++ b/packages/react-common/src/services/isEmpty.ts
--- a/packages/react-common/src/services/splitValueAndUnit.test.ts
+++ b/packages/react-common/src/services/splitValueAndUnit.test.ts
--- a/packages/react-common/src/services/splitValueAndUnit.ts
+++ b/packages/react-common/src/services/splitValueAndUnit.ts
--- a/packages/react-common/src/services/stringify.test.ts
+++ b/packages/react-common/src/services/stringify.test.ts
@@ -1,5 +1,5 @@
 import * as fc from 'fast-check'
 import * as fcArb from '../../utilities/fast-check/arbitraries'
 import * as fcArb from '../../../../utilities/fast-check/arbitraries'
 import stringify from './stringify'

 it('should exist', () => {
--- a/packages/react-common/src/services/stringify.ts
+++ b/packages/react-common/src/services/stringify.ts
--- a/packages/react-common/src/services/utilities.ts
+++ b/packages/react-common/src/services/utilities.ts
--- a/plop/templates/react-common-docs/component/{{pascalCase
+++ b/plop/templates/react-common-docs/component/{{pascalCase
--- a/plop/templates/react-common/component/{{pascalCase
+++ b/plop/templates/react-common/component/{{pascalCase
--- a/plop/templates/react-common/component/{{pascalCase
+++ b/plop/templates/react-common/component/{{pascalCase
--- a/plopfile.js
+++ b/plopfile.js
@@ -1,4 +1,3 @@
 const testName = require('./plop/helpers/testName.js')
 module.exports = plop => {
  plop.setGenerator('component', {
    description: 'Creates a component.',
@@ -21,9 +20,15 @@ module.exports = plop => {
    actions: [
      {
        type: 'addMany',
        templateFiles: 'plop/templates/component/*',
        base: 'plop/templates/component',
        destination: 'lib/components/{{pascalCase name}}',
        templateFiles: 'plop/templates/react-common/component/*',
        base: 'plop/templates/react-common/component',
        destination: 'packages/react-common/src/components/{{pascalCase name}}',
      },
      {
        type: 'addMany',
        templateFiles: 'plop/templates/react-common-docs/component/*',
        base: 'plop/templates/react-common-docs/component',
        destination: 'packages/react-common-docs/src/pages/components',
      },
    ],
  })
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -4,7 +4,7 @@ import typescript from '@rollup/plugin-typescript'

 import pkg from './package.json'

 const ENTRY_POINT = './lib/index.ts'
 const ENTRY_POINT = './packages/react-common/src/index.ts'

 export default {
  input: ENTRY_POINT,
--- a/yarn.lock
+++ b/yarn.lock