test(ui-toolkit): unit tests

packages/cp-frontend/package.json

@@ -41,17 +41,17 @@
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
     "react-router": "^4.1.1",
-    "react-router-dom": "^4.1.1",
+    "react-router-dom": "^4.1.2",
     "react-simple-table": "^1.0.1",
-    "react-styled-flexboxgrid": "^2.0.1",
+    "react-styled-flexboxgrid": "^2.0.3",
-    "redux": "^3.6.0",
+    "redux": "^3.7.2",
     "redux-actions": "^2.0.3",
     "redux-batched-actions": "^0.2.0",
-    "redux-form": "^7.0.0",
+    "redux-form": "^7.0.2",
     "remcalc": "^1.0.8",
     "reselect": "^3.0.1",
     "simple-statistics": "^4.1.0",
-    "styled-components": "^2.1.0",
+    "styled-components": "^2.1.1",
     "styled-is": "^1.0.11",
     "styled-text-spinners": "^1.0.1",
     "title-case": "^2.1.1",
@@ -62,7 +62,7 @@
     "apr-for-each": "^1.0.6",
     "apr-main": "^1.0.7",
     "babel-plugin-inline-react-svg": "^0.4.0",
-    "babel-plugin-styled-components": "^1.1.4",
+    "babel-plugin-styled-components": "^1.1.7",
     "babel-preset-joyent-portal": "^1.0.3",
     "cross-env": "^5.0.1",
     "eslint": "^3.19.0",
@@ -74,14 +74,14 @@
     "jest-junit": "^1.5.1",
     "jest-matcher-utils": "^20.0.3",
     "jest-snapshot": "^20.0.3",
-    "jest-styled-components": "^3.0.2",
+    "jest-styled-components": "^4.2.2",
     "mz": "^2.6.0",
     "react-scripts": "^1.0.7",
     "react-test-renderer": "^15.6.1",
     "redrun": "^5.9.15",
-    "stylelint": "^7.11.1",
+    "stylelint": "^8.0.0",
-    "stylelint-config-primer": "^1.4.0",
+    "stylelint-config-primer": "^2.0.0",
-    "stylelint-config-standard": "^16.0.0",
+    "stylelint-config-standard": "^17.0.0",
-    "stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#68b4c4f"
+    "stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#2a33b5f"
   }
 }

packages/normalized-styled-components/package.json

@@ -33,7 +33,7 @@
     "remcalc": "^1.0.8"
   },
   "devDependencies": {
-    "babel-plugin-styled-components": "^1.1.4",
+    "babel-plugin-styled-components": "^1.1.7",
     "babel-preset-react-app": "^3.0.0",
     "bup": "^1.0.9",
     "chalk": "^1.1.3",
@@ -44,17 +44,17 @@
     "jest-junit": "^1.5.1",
     "jest-matcher-utils": "^20.0.3",
     "jest-snapshot": "^20.0.3",
-    "jest-styled-components": "^3.0.2",
+    "jest-styled-components": "^4.2.2",
     "react": "^15.6.1",
     "react-scripts": "^1.0.7",
     "react-test-renderer": "^15.6.1",
     "redrun": "^5.9.15",
     "strip-ansi": "^3.0.1",
-    "styled-components": "^2.1.0",
+    "styled-components": "^2.1.1",
-    "stylelint": "^7.11.1",
+    "stylelint": "^8.0.0",
-    "stylelint-config-primer": "^1.4.0",
+    "stylelint-config-primer": "^2.0.0",
-    "stylelint-config-standard": "^16.0.0",
+    "stylelint-config-standard": "^17.0.0",
-    "stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#68b4c4f"
+    "stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#2a33b5f"
   },
   "peerDependencies": {
     "react": "*",

packages/normalized-styled-components/test/__snapshots__/index.js.snap

@@ -1,71 +1,75 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <A /> correctly 1`] = `
-.jleQxG {
+.c0 {
   background-color: transparent;
   text-decoration-skip: objects;
 }
 
 <a
-  className="sc-gqjmRU jleQxG"
+  className="c0"
 />
 `;
 
 exports[`renders <Abbr /> correctly 1`] = `
-
+.c0[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
 
 <abbr
-  className="sc-VigVT ijOVMO"
+  className="c0"
 />
 `;
 
 exports[`renders <Article /> correctly 1`] = `
-.fpcbkF {
+.c0 {
   display: block;
 }
 
 <article
-  className="sc-bdVaJa fpcbkF"
+  className="c0"
 />
 `;
 
 exports[`renders <Aside /> correctly 1`] = `
-.gbieAY {
+.c0 {
   display: block;
 }
 
 <aside
-  className="sc-bwzfXH gbieAY"
+  className="c0"
 />
 `;
 
 exports[`renders <Audio /> correctly 1`] = `
-.SYMpT {
+.c0 {
   display: inline-block;
 }
 
-.SYMpT:not([controls]) {
+.c0:not([controls]) {
   display: none;
   height: 0;
 }
 
 <audio
-  className="sc-ckVGcZ SYMpT"
+  className="c0"
 />
 `;
 
 exports[`renders <B /> correctly 1`] = `
-.vhpOG {
+.c0 {
   font-weight: bolder;
 }
 
 <b
-  className="sc-jTzLTM vhpOG"
+  className="c0"
 />
 `;
 
 exports[`renders <Button /> correctly 1`] = `
-.efaqoE {
+.c0 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -77,153 +81,153 @@ exports[`renders <Button /> correctly 1`] = `
   appearance: button;
 }
 
-.efaqoE::-moz-focus-inner,
+.c0::-moz-focus-inner,
-.efaqoE[type="button"]::-moz-focus-inner,
+.c0[type="button"]::-moz-focus-inner,
-.efaqoE[type="reset"]::-moz-focus-inner,
+.c0[type="reset"]::-moz-focus-inner,
-.efaqoE[type="submit"]::-moz-focus-inner {
+.c0[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.efaqoE:-moz-focusring,
+.c0:-moz-focusring,
-.efaqoE[type="button"]:-moz-focusring,
+.c0[type="button"]:-moz-focusring,
-.efaqoE[type="reset"]:-moz-focusring,
+.c0[type="reset"]:-moz-focusring,
-.efaqoE[type="submit"]:-moz-focusring {
+.c0[type="submit"]:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
 <button
-  className="sc-kEYyzF efaqoE"
+  className="c0"
 />
 `;
 
 exports[`renders <Canvas /> correctly 1`] = `
-.gIGqrW {
+.c0 {
   display: inline-block;
 }
 
 <canvas
-  className="sc-gPEVay gIGqrW"
+  className="c0"
 />
 `;
 
 exports[`renders <Code /> correctly 1`] = `
-.NmzmU {
+.c0 {
   font-family: monospace,monospace;
   font-size: 1rem;
 }
 
 <code
-  className="sc-jzJRlG NmzmU"
+  className="c0"
 />
 `;
 
 exports[`renders <Details /> correctly 1`] = `
-.kSeyxS {
+.c0 {
   display: block;
 }
 
 <details
-  className="sc-cMljjf kSeyxS"
+  className="c0"
 />
 `;
 
 exports[`renders <Dfn /> correctly 1`] = `
-.lcACZG {
+.c0 {
   font-style: italic;
 }
 
 <dfn
-  className="sc-chPdSV lcACZG"
+  className="c0"
 />
 `;
 
 exports[`renders <Fieldset /> correctly 1`] = `
-.dLqrpE {
+.c0 {
   padding: 0.35em 0.75em 0.625em;
 }
 
 <fieldset
-  className="sc-cvbbAY dLqrpE"
+  className="c0"
 />
 `;
 
 exports[`renders <FigCaption /> correctly 1`] = `
-.fGYiaS {
+.c0 {
   display: block;
 }
 
 <figcaption
-  className="sc-bZQynM fGYiaS"
+  className="c0"
 />
 `;
 
 exports[`renders <Figure /> correctly 1`] = `
-.fpLcXm {
+.c0 {
   display: block;
   margin: 1rem 2.5rem;
 }
 
 <figure
-  className="sc-gzVnrw fpLcXm"
+  className="c0"
 />
 `;
 
 exports[`renders <Footer /> correctly 1`] = `
-.dMAkQL {
+.c0 {
   display: block;
 }
 
 <footer
-  className="sc-htpNat dMAkQL"
+  className="c0"
 />
 `;
 
 exports[`renders <H1 /> correctly 1`] = `
-.itlxbG {
+.c0 {
   font-size: 2rem;
   margin: 0.625rem 0;
 }
 
 <h1
-  className="sc-dnqmqq itlxbG"
+  className="c0"
 />
 `;
 
 exports[`renders <Header /> correctly 1`] = `
-.imCjfa {
+.c0 {
   display: block;
 }
 
 <header
-  className="sc-bxivhb imCjfa"
+  className="c0"
 />
 `;
 
 exports[`renders <Hr /> correctly 1`] = `
-.jvTISp {
+.c0 {
   box-sizing: content-box;
   height: 0;
   overflow: visible;
 }
 
 <hr
-  className="sc-iwsKbI jvTISp"
+  className="c0"
 />
 `;
 
 exports[`renders <Img /> correctly 1`] = `
-.gLFqHa {
+.c0 {
   border-style: none;
 }
 
 <img
-  className="sc-eNQAEJ gLFqHa"
+  className="c0"
 />
 `;
 
 exports[`renders <Input /> correctly 1`] = `
-.gtmtGl {
+.c0 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -231,7 +235,32 @@ exports[`renders <Input /> correctly 1`] = `
   overflow: visible;
 }
 
-.gtmtGl::-webkit-file-upload-button {
+.c0[type="checkbox"],
+.c0[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c0[type="number"]::-webkit-inner-spin-button,
+.c0[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c0[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c0[type="search"]::-webkit-search-cancel-button,
+.c0[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c0::-webkit-file-upload-button {
   -webkit-appearance: button;
   -moz-appearance: button;
   appearance: button;
@@ -239,23 +268,23 @@ exports[`renders <Input /> correctly 1`] = `
 }
 
 <input
-  className="sc-kkGfuU gtmtGl"
+  className="c0"
 />
 `;
 
 exports[`renders <Kbd /> correctly 1`] = `
-.cNQErp {
+.c0 {
   font-family: monospace,monospace;
   font-size: 1rem;
 }
 
 <kbd
-  className="sc-cSHVUG cNQErp"
+  className="c0"
 />
 `;
 
 exports[`renders <Legend /> correctly 1`] = `
-.iBvQlR {
+.c0 {
   box-sizing: border-box;
   color: inherit;
   display: table;
@@ -265,53 +294,53 @@ exports[`renders <Legend /> correctly 1`] = `
 }
 
 <legend
-  className="sc-jWBwVP iBvQlR"
+  className="c0"
 />
 `;
 
 exports[`renders <Main /> correctly 1`] = `
-.kGbKV {
+.c0 {
   display: block;
 }
 
 <main
-  className="sc-htoDjs kGbKV"
+  className="c0"
 />
 `;
 
 exports[`renders <Mark /> correctly 1`] = `
-.gUcHXP {
+.c0 {
   background-color: #ff0;
   color: #000;
 }
 
 <mark
-  className="sc-kgoBCf gUcHXP"
+  className="c0"
 />
 `;
 
 exports[`renders <Menu /> correctly 1`] = `
-.EtDOy {
+.c0 {
   display: block;
 }
 
 <menu
-  className="sc-jAaTju EtDOy"
+  className="c0"
 />
 `;
 
 exports[`renders <Nav /> correctly 1`] = `
-.kXFzZl {
+.c0 {
   display: block;
 }
 
 <nav
-  className="sc-ifAKCX kXFzZl"
+  className="c0"
 />
 `;
 
 exports[`renders <Optgroup /> correctly 1`] = `
-.bwvGAC {
+.c0 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -319,55 +348,55 @@ exports[`renders <Optgroup /> correctly 1`] = `
 }
 
 <optgroup
-  className="sc-iAyFgw bwvGAC"
+  className="c0"
 />
 `;
 
 exports[`renders <Pre /> correctly 1`] = `
-.ePyiae {
+.c0 {
   font-family: monospace,monospace;
   font-size: 1rem;
 }
 
 <pre
-  className="sc-gZMcBi ePyiae"
+  className="c0"
 />
 `;
 
 exports[`renders <Progress /> correctly 1`] = `
-.irOoVX {
+.c0 {
   display: inline-block;
   vertical-align: baseline;
 }
 
 <progress
-  className="sc-brqgnP irOoVX"
+  className="c0"
 />
 `;
 
 exports[`renders <Samp /> correctly 1`] = `
-.brPjlW {
+.c0 {
   font-family: monospace,monospace;
   font-size: 1rem;
 }
 
 <samp
-  className="sc-kAzzGY brPjlW"
+  className="c0"
 />
 `;
 
 exports[`renders <Section /> correctly 1`] = `
-.kyfnqM {
+.c0 {
   display: block;
 }
 
 <section
-  className="sc-EHOje kyfnqM"
+  className="c0"
 />
 `;
 
 exports[`renders <Select /> correctly 1`] = `
-.kskmSD {
+.c0 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -376,32 +405,32 @@ exports[`renders <Select /> correctly 1`] = `
 }
 
 <select
-  className="sc-hSdWYo kskmSD"
+  className="c0"
 />
 `;
 
 exports[`renders <Small /> correctly 1`] = `
-.eNDzVi {
+.c0 {
   font-size: 80%;
 }
 
 <small
-  className="sc-kGXeez eNDzVi"
+  className="c0"
 />
 `;
 
 exports[`renders <Strong /> correctly 1`] = `
-.liZvtt {
+.c0 {
   font-weight: bolder;
 }
 
 <strong
-  className="sc-fjdhpX liZvtt"
+  className="c0"
 />
 `;
 
 exports[`renders <Sub /> correctly 1`] = `
-.bfYNTw {
+.c0 {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -410,22 +439,22 @@ exports[`renders <Sub /> correctly 1`] = `
 }
 
 <sub
-  className="sc-kpOJdX bfYNTw"
+  className="c0"
 />
 `;
 
 exports[`renders <Summary /> correctly 1`] = `
-.chrtFK {
+.c0 {
   display: list-item;
 }
 
 <summary
-  className="sc-jDwBTQ chrtFK"
+  className="c0"
 />
 `;
 
 exports[`renders <Sup /> correctly 1`] = `
-.hZcmXd {
+.c0 {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -434,22 +463,22 @@ exports[`renders <Sup /> correctly 1`] = `
 }
 
 <sup
-  className="sc-dxgOiQ hZcmXd"
+  className="c0"
 />
 `;
 
 exports[`renders <Svg /> correctly 1`] = `
-.GnRoM:not(:root) {
+.c0:not(:root) {
   overflow: hidden;
 }
 
 <svg
-  className="sc-hMqMXs GnRoM"
+  className="c0"
 />
 `;
 
 exports[`renders <Textarea /> correctly 1`] = `
-.bDTEgL {
+.c0 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -458,16 +487,16 @@ exports[`renders <Textarea /> correctly 1`] = `
 }
 
 <textarea
-  className="sc-eHgmQL bDTEgL"
+  className="c0"
 />
 `;
 
 exports[`renders <Video /> correctly 1`] = `
-.bkGlpl {
+.c0 {
   display: inline-block;
 }
 
 <video
-  className="sc-jKJlTe bkGlpl"
+  className="c0"
 />
 `;

packages/normalized-styled-components/test/index.js

@@ -47,200 +47,200 @@ import {
 
 it('renders <Article /> correctly', () => {
   const tree = renderer.create(<Article />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Aside /> correctly', () => {
   const tree = renderer.create(<Aside />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Footer /> correctly', () => {
   const tree = renderer.create(<Footer />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Header /> correctly', () => {
   const tree = renderer.create(<Header />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Nav /> correctly', () => {
   const tree = renderer.create(<Nav />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Section /> correctly', () => {
   const tree = renderer.create(<Section />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <FigCaption /> correctly', () => {
   const tree = renderer.create(<FigCaption />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Figure /> correctly', () => {
   const tree = renderer.create(<Figure />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Main /> correctly', () => {
   const tree = renderer.create(<Main />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <H1 /> correctly', () => {
   const tree = renderer.create(<H1 />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Hr /> correctly', () => {
   const tree = renderer.create(<Hr />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Pre /> correctly', () => {
   const tree = renderer.create(<Pre />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <A /> correctly', () => {
   const tree = renderer.create(<A />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Abbr /> correctly', () => {
   const tree = renderer.create(<Abbr />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <B /> correctly', () => {
   const tree = renderer.create(<B />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Strong /> correctly', () => {
   const tree = renderer.create(<Strong />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Code /> correctly', () => {
   const tree = renderer.create(<Code />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Kbd /> correctly', () => {
   const tree = renderer.create(<Kbd />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Samp /> correctly', () => {
   const tree = renderer.create(<Samp />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Dfn /> correctly', () => {
   const tree = renderer.create(<Dfn />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Mark /> correctly', () => {
   const tree = renderer.create(<Mark />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Small /> correctly', () => {
   const tree = renderer.create(<Small />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Sub /> correctly', () => {
   const tree = renderer.create(<Sub />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Sup /> correctly', () => {
   const tree = renderer.create(<Sup />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Audio /> correctly', () => {
   const tree = renderer.create(<Audio />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Video /> correctly', () => {
   const tree = renderer.create(<Video />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Img /> correctly', () => {
   const tree = renderer.create(<Img />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Svg /> correctly', () => {
   const tree = renderer.create(<Svg />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Button /> correctly', () => {
   const tree = renderer.create(<Button />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Input /> correctly', () => {
   const tree = renderer.create(<Input />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Optgroup /> correctly', () => {
   const tree = renderer.create(<Optgroup />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Select /> correctly', () => {
   const tree = renderer.create(<Select />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Textarea /> correctly', () => {
   const tree = renderer.create(<Textarea />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Fieldset /> correctly', () => {
   const tree = renderer.create(<Fieldset />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Legend /> correctly', () => {
   const tree = renderer.create(<Legend />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Progress /> correctly', () => {
   const tree = renderer.create(<Progress />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Details /> correctly', () => {
   const tree = renderer.create(<Details />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Menu /> correctly', () => {
   const tree = renderer.create(<Menu />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Summary /> correctly', () => {
   const tree = renderer.create(<Summary />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });
 
 it('renders <Canvas /> correctly', () => {
   const tree = renderer.create(<Canvas />).toJSON();
-  expect(tree).toMatchStyledComponentsSnapshot();
+  expect(tree).toMatchSnapshot();
 });

packages/styled-is/package.json

@@ -41,7 +41,7 @@
     "nyc": "^11.0.3",
     "react": "^15.6.1",
     "redrun": "^5.9.15",
-    "styled-components": "^2.1.0",
+    "styled-components": "^2.1.1",
     "tap-xunit": "^1.7.0"
   },
   "peerDependencies": {

packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-0.snap

@@ -0,0 +1,6 @@
+exports[`Anchor-0 1`] = `
+<a
+  className="baseline-jsABYb bHdHoA sc-htpNat snokA">
+  Inspire the lazy
+</a>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-1.snap

@@ -0,0 +1,13 @@
+exports[`Anchor-1 1`] = `
+<span
+  style={
+    Object {
+      "background-color": "#343434",
+    }
+  }>
+  <a
+    className="baseline-jsABYb bHdHoA sc-htpNat WIPzo">
+    Inspire the lazy secondary
+  </a>
+</span>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Baseline-1.snap

@@ -0,0 +1,24 @@
+exports[`Baseline-1 1`] = `
+<span>
+  <button
+    className="baseline-jkhKOg cuQGXb sc-bxivhb bOlNJJ">
+    margin-right: 1
+  </button>
+  <button
+    className="baseline-jkhKOg WiuoE sc-bxivhb bOlNJJ">
+    margin-right: 2
+  </button>
+  <button
+    className="baseline-jkhKOg elcFTQ sc-bxivhb bOlNJJ">
+    margin-right: 3
+  </button>
+  <button
+    className="baseline-jkhKOg cAVBXR sc-bxivhb bOlNJJ">
+    margin-right: 4
+  </button>
+  <button
+    className="baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+    hello
+  </button>
+</span>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Breadcrumb-0.snap

@@ -0,0 +1,42 @@
+exports[`Breadcrumb-0 1`] = `
+<div
+  className="Row__Row-kNtYPA bvOcuL"
+  name="breadcrum">
+  <div>
+    <h2
+      className="sc-bZQynM cgWLxo"
+      name="breadcrum-item">
+      Home
+    </h2>
+    <div
+      className="item__Arrow-isQXJJ bHDHOa" />
+  </div>
+  <div>
+    <h2
+      className="sc-bZQynM cgWLxo"
+      name="breadcrum-item">
+      Warp Records Blog
+    </h2>
+    <div
+      className="item__Arrow-isQXJJ bHDHOa" />
+  </div>
+  <div>
+    <h2
+      className="sc-bZQynM cgWLxo"
+      name="breadcrum-item">
+      Services
+    </h2>
+    <div
+      className="item__Arrow-isQXJJ bHDHOa" />
+  </div>
+  <div>
+    <h2
+      className="sc-bZQynM cgWLxo"
+      name="breadcrum-item">
+      Nginx
+    </h2>
+    <div
+      className="item__Arrow-isQXJJ bHDHOa" />
+  </div>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Button-1.snap

@@ -0,0 +1,16 @@
+exports[`Button-1 1`] = `
+<span>
+  <button
+    className="baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+    Inspire the lazy
+  </button>
+  <span>
+     
+  </span>
+  <a
+    className="baseline-jkhKOg bGfvGf sc-ifAKCX zMuGz"
+    href="#1">
+    Inspire the lazy (anchor)
+  </a>
+</span>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Button-3.snap

@@ -0,0 +1,16 @@
+exports[`Button-3 1`] = `
+<span>
+  <button
+    className="baseline-jkhKOg bGfvGf sc-bxivhb jwtxvS">
+    Inspire the brave
+  </button>
+  <span>
+     
+  </span>
+  <a
+    className="baseline-jkhKOg bGfvGf sc-ifAKCX cRsYDh"
+    href="#2">
+    Inspire the brave (anchor)
+  </a>
+</span>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Button-5.snap

@@ -0,0 +1,16 @@
+exports[`Button-5 1`] = `
+<span>
+  <button
+    className="baseline-jkhKOg bGfvGf sc-bxivhb fpycaT">
+    Inspire the tertiary
+  </button>
+  <span>
+     
+  </span>
+  <a
+    className="baseline-jkhKOg bGfvGf sc-ifAKCX iguUxA"
+    href="#3">
+    Inspire the tertiary (anchor)
+  </a>
+</span>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Button-7.snap

@@ -0,0 +1,18 @@
+exports[`Button-7 1`] = `
+<span>
+  <button
+    className="baseline-jkhKOg bGfvGf sc-bxivhb ikWyJZ"
+    disabled={true}>
+    Inspire the liars
+  </button>
+  <span>
+     
+  </span>
+  <a
+    className="baseline-jkhKOg bGfvGf sc-ifAKCX cLIvqN"
+    disabled={true}
+    href="#4">
+    Inspire the liars (anchor)
+  </a>
+</span>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Card-0.snap

@@ -0,0 +1,62 @@
+exports[`Card-0 1`] = `
+<div
+  className="baseline-bICRiI vuCxY sc-gzVnrw hbXjIj"
+  name="card">
+  <div
+    className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
+    name="card-view">
+    <div
+      className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
+      name="card-meta">
+      <div
+        className="sc-gqjmRU gxBTEj">
+        <div
+          className="baseline-dWhmw iUarQB title__Container-jarCPF dhAycX"
+          name="card-title">
+          <span
+            className="title__Span-llmdJe gCbJBV">
+            Title
+          </span>
+        </div>
+        <div
+          className="baseline-SuZbH cbysRz sc-jzJRlG biTFBL title__Container-jarCPF dhAycX"
+          name="card-subtitle">
+          <span
+            className="subtitle__Span-gDOhPu dYNDIO">
+            Subtitle
+          </span>
+        </div>
+        <div
+          className="baseline-hhScbu cgEMEx sc-htoDjs dVJZOW title__Container-jarCPF dhAycX"
+          name="card-description">
+          <div
+            className="description__InnerDescription-bydbUy eMMLFJ">
+            Description
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="baseline-ebPLBq jwbyPT sc-fjdhpX gRqWay"
+      name="card-outlet">
+      Outlet
+    </div>
+  </div>
+  <nav
+    className="sc-VigVT hGIiBl"
+    name="card-options">
+    <button
+      className="baseline-inlylk hdiMjF sc-jTzLTM cZvyzC sc-bxivhb ezMUTD">
+      <div
+        className="options__StyledContainer-cSSlGR bljWiP">
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+      </div>
+    </button>
+  </nav>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Card-10.snap

@@ -0,0 +1,173 @@
+exports[`Card-10 1`] = `
+<div
+  className="baseline-bICRiI vuCxY sc-gzVnrw hbXjIj"
+  name="card">
+  <div
+    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw EEjfB"
+    name="card-header">
+    <div
+      className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
+      name="card-view">
+      <div
+        className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
+        name="card-meta">
+        <div
+          className="sc-gqjmRU cVsyzo">
+          <div
+            className="baseline-dWhmw iUarQB title__Container-jarCPF hUYnGC"
+            name="card-title">
+            <span
+              className="title__Span-llmdJe gCbJBV">
+              Title
+            </span>
+          </div>
+          <div
+            className="baseline-SuZbH cbysRz sc-jzJRlG cpAxyY title__Container-jarCPF hUYnGC"
+            name="card-subtitle">
+            <span
+              className="subtitle__Span-gDOhPu eEQXKT">
+              Subtitle
+            </span>
+          </div>
+          <div
+            className="baseline-hhScbu cgEMEx sc-htoDjs fllffw title__Container-jarCPF hUYnGC"
+            name="card-description">
+            <div
+              className="description__InnerDescription-bydbUy dqDhMv">
+              Description
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <nav
+      className="sc-VigVT bdTbEK"
+      name="card-options">
+      <button
+        className="baseline-inlylk hdiMjF sc-jTzLTM kYikIH sc-bxivhb iOvBML">
+        <div
+          className="options__StyledContainer-cSSlGR bljWiP">
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+        </div>
+      </button>
+    </nav>
+  </div>
+  <div
+    className="baseline-iMHSlr gIqaSF sc-gZMcBi uLhlE sc-iwsKbI fJJDmf"
+    name="card-view">
+    <div
+      className="baseline-bICRiI vuCxY sc-gzVnrw gFFWSQ"
+      name="card">
+      <div
+        className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
+        name="card-view">
+        <div
+          className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
+          name="card-meta">
+          <div
+            className="sc-gqjmRU gxBTEj">
+            <div
+              className="baseline-dWhmw iUarQB title__Container-jarCPF dhAycX"
+              name="card-title">
+              <span
+                className="title__Span-llmdJe gCbJBV">
+                Title
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          className="baseline-ebPLBq jwbyPT sc-fjdhpX gRqWay"
+          name="card-outlet">
+          Outlet
+        </div>
+      </div>
+    </div>
+    <div
+      className="baseline-bICRiI vuCxY sc-gzVnrw gFFWSQ"
+      name="card">
+      <div
+        className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
+        name="card-view">
+        <div
+          className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
+          name="card-meta">
+          <div
+            className="sc-gqjmRU gxBTEj">
+            <div
+              className="baseline-dWhmw iUarQB title__Container-jarCPF dhAycX"
+              name="card-title">
+              <span
+                className="title__Span-llmdJe gCbJBV">
+                Title
+              </span>
+            </div>
+            <div
+              className="baseline-SuZbH cbysRz sc-jzJRlG biTFBL title__Container-jarCPF dhAycX"
+              name="card-subtitle">
+              <span
+                className="subtitle__Span-gDOhPu dYNDIO">
+                Subtitle
+              </span>
+            </div>
+            <div
+              className="baseline-hhScbu cgEMEx sc-htoDjs dVJZOW title__Container-jarCPF dhAycX"
+              name="card-description">
+              <div
+                className="description__InnerDescription-bydbUy eMMLFJ">
+                Description
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="baseline-ebPLBq jwbyPT sc-fjdhpX gRqWay"
+          name="card-outlet">
+          Outlet
+        </div>
+      </div>
+    </div>
+    <div
+      className="baseline-bICRiI vuCxY sc-gzVnrw dTVoUi"
+      name="card">
+      <div
+        className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
+        name="card-view">
+        <div
+          className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
+          name="card-meta">
+          <div
+            className="sc-gqjmRU gxBTEj">
+            <div
+              className="baseline-dWhmw iUarQB title__Container-jarCPF dhAycX"
+              name="card-title">
+              <span
+                className="title__Span-llmdJe gCbJBV">
+                Title
+              </span>
+            </div>
+            <div
+              className="baseline-SuZbH cbysRz sc-jzJRlG biTFBL title__Container-jarCPF dhAycX"
+              name="card-subtitle">
+              <span
+                className="subtitle__Span-gDOhPu dYNDIO">
+                Subtitle
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          className="baseline-ebPLBq jwbyPT sc-fjdhpX gRqWay"
+          name="card-outlet">
+          Outlet
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Card-2.snap

@@ -0,0 +1,62 @@
+exports[`Card-2 1`] = `
+<div
+  className="baseline-bICRiI vuCxY sc-gzVnrw kzwIJz"
+  name="card">
+  <div
+    className="baseline-fRqHUu hfQLiT sc-iwsKbI jwPBgV"
+    name="card-view">
+    <div
+      className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
+      name="card-meta">
+      <div
+        className="sc-gqjmRU cVsyzo">
+        <div
+          className="baseline-dWhmw iUarQB title__Container-jarCPF dYzNAP"
+          name="card-title">
+          <span
+            className="title__Span-llmdJe gCbJBV">
+            Title
+          </span>
+        </div>
+        <div
+          className="baseline-SuZbH cbysRz sc-jzJRlG cpAxyY title__Container-jarCPF dYzNAP"
+          name="card-subtitle">
+          <span
+            className="subtitle__Span-gDOhPu dVbpRc">
+            Subtitle
+          </span>
+        </div>
+        <div
+          className="baseline-hhScbu cgEMEx sc-htoDjs fllffw title__Container-jarCPF dYzNAP"
+          name="card-description">
+          <div
+            className="description__InnerDescription-bydbUy dqDhMv">
+            Description
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="baseline-ebPLBq jwbyPT sc-fjdhpX eVHcsL"
+      name="card-outlet">
+      Outlet
+    </div>
+  </div>
+  <nav
+    className="sc-VigVT hGIiBl"
+    name="card-options">
+    <button
+      className="baseline-inlylk hdiMjF sc-jTzLTM kYikIH sc-bxivhb ezMUTD">
+      <div
+        className="options__StyledContainer-cSSlGR bljWiP">
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+      </div>
+    </button>
+  </nav>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Card-4.snap

@@ -0,0 +1,85 @@
+exports[`Card-4 1`] = `
+<div
+  className="baseline-bICRiI vuCxY sc-gzVnrw hbXjIj"
+  name="card">
+  <div
+    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw EEjfB"
+    name="card-header">
+    <div
+      className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
+      name="card-view">
+      <div
+        className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
+        name="card-meta">
+        <div
+          className="sc-gqjmRU cVsyzo">
+          <div
+            className="baseline-dWhmw iUarQB title__Container-jarCPF hUYnGC"
+            name="card-title">
+            <span
+              className="title__Span-llmdJe gCbJBV">
+              Title
+            </span>
+          </div>
+          <div
+            className="baseline-SuZbH cbysRz sc-jzJRlG cpAxyY title__Container-jarCPF hUYnGC"
+            name="card-subtitle">
+            <span
+              className="subtitle__Span-gDOhPu eEQXKT">
+              Subtitle
+            </span>
+          </div>
+          <div
+            className="baseline-hhScbu cgEMEx sc-htoDjs fllffw title__Container-jarCPF hUYnGC"
+            name="card-description">
+            <div
+              className="description__InnerDescription-bydbUy dqDhMv">
+              Description
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <nav
+      className="sc-VigVT bdTbEK"
+      name="card-options">
+      <button
+        className="baseline-inlylk hdiMjF sc-jTzLTM kYikIH sc-bxivhb iOvBML">
+        <div
+          className="options__StyledContainer-cSSlGR bljWiP">
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+        </div>
+      </button>
+    </nav>
+  </div>
+  <div
+    className="baseline-fRqHUu hfQLiT sc-iwsKbI fJJDmf"
+    name="card-view">
+    <div
+      className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
+      name="card-meta">
+      <div
+        className="sc-gqjmRU gxBTEj">
+        <div
+          className="baseline-hhScbu cgEMEx sc-htoDjs dVJZOW title__Container-jarCPF dhAycX"
+          name="card-description">
+          <div
+            className="description__InnerDescription-bydbUy eMMLFJ">
+            Description
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="baseline-ebPLBq jwbyPT sc-fjdhpX gRqWay"
+      name="card-outlet">
+      Outlet
+    </div>
+  </div>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Card-6.snap

@@ -0,0 +1,61 @@
+exports[`Card-6 1`] = `
+<div
+  className="baseline-bICRiI vuCxY sc-gzVnrw EEjfB"
+  name="card">
+  <div
+    className="baseline-btTgpK bpXyln sc-dnqmqq fQWANf sc-gzVnrw EEjfB"
+    name="card-header">
+    <div
+      className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
+      name="card-view">
+      <div
+        className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
+        name="card-meta">
+        <div
+          className="sc-gqjmRU cVsyzo">
+          <div
+            className="baseline-dWhmw iUarQB title__Container-jarCPF hUYnGC"
+            name="card-title">
+            <span
+              className="title__Span-llmdJe gCbJBV">
+              Title
+            </span>
+          </div>
+          <div
+            className="baseline-SuZbH cbysRz sc-jzJRlG cpAxyY title__Container-jarCPF hUYnGC"
+            name="card-subtitle">
+            <span
+              className="subtitle__Span-gDOhPu eEQXKT">
+              Subtitle
+            </span>
+          </div>
+          <div
+            className="baseline-hhScbu cgEMEx sc-htoDjs fllffw title__Container-jarCPF hUYnGC"
+            name="card-description">
+            <div
+              className="description__InnerDescription-bydbUy dqDhMv">
+              Description
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <nav
+      className="sc-VigVT bdTbEK"
+      name="card-options">
+      <button
+        className="baseline-inlylk hdiMjF sc-jTzLTM kYikIH sc-bxivhb iOvBML">
+        <div
+          className="options__StyledContainer-cSSlGR bljWiP">
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+          <div
+            className="options__StyledCircle-ldkelG KbKxI" />
+        </div>
+      </button>
+    </nav>
+  </div>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Card-8.snap

@@ -0,0 +1,62 @@
+exports[`Card-8 1`] = `
+<div
+  className="baseline-bICRiI vuCxY sc-gzVnrw jNGRmm"
+  name="card">
+  <div
+    className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
+    name="card-view">
+    <div
+      className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
+      name="card-meta">
+      <div
+        className="sc-gqjmRU gxBTEj">
+        <div
+          className="baseline-dWhmw iUarQB title__Container-jarCPF dhAycX"
+          name="card-title">
+          <span
+            className="title__Span-llmdJe gCbJBV">
+            Title
+          </span>
+        </div>
+        <div
+          className="baseline-SuZbH cbysRz sc-jzJRlG biTFBL title__Container-jarCPF dhAycX"
+          name="card-subtitle">
+          <span
+            className="subtitle__Span-gDOhPu dYNDIO">
+            Subtitle
+          </span>
+        </div>
+        <div
+          className="baseline-hhScbu cgEMEx sc-htoDjs dVJZOW title__Container-jarCPF dhAycX"
+          name="card-description">
+          <div
+            className="description__InnerDescription-bydbUy eMMLFJ">
+            Description
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="baseline-ebPLBq jwbyPT sc-fjdhpX gRqWay"
+      name="card-outlet">
+      Outlet
+    </div>
+  </div>
+  <nav
+    className="sc-VigVT hGIiBl"
+    name="card-options">
+    <button
+      className="baseline-inlylk hdiMjF sc-jTzLTM cZvyzC sc-bxivhb ezMUTD">
+      <div
+        className="options__StyledContainer-cSSlGR bljWiP">
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+        <div
+          className="options__StyledCircle-ldkelG dyWgQN" />
+      </div>
+    </button>
+  </nav>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-0.snap

@@ -0,0 +1,23 @@
+exports[`Checkbox-0 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <div
+      className="toggle__InnerContainer-hKefxl bVmJyd"
+      type="checkbox">
+      <input
+        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+        id="bQgEPp"
+        type="checkbox" />
+      <label
+        className="toggle__Label-soSmI bQFovI"
+        htmlFor="bQgEPp" />
+    </div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="tdcPZ">
+      Check this out!
+    </label>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-10.snap

@@ -0,0 +1,104 @@
+exports[`Checkbox-10 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="bOhIC"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI HHzKC"
+          htmlFor="bOhIC" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cgtlqe">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected meta error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="bTsBJN"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI HHzKC"
+          htmlFor="bTsBJN" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="nyTFu">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected group error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="cswYPr"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI bQFovI"
+          htmlFor="cswYPr" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="BXMBi">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected children error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="aojPD"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI bQFovI"
+          htmlFor="aojPD" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="clbhyR">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected inline error!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-12.snap

@@ -0,0 +1,104 @@
+exports[`Checkbox-12 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="ctqvdl"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI lfNAGO"
+          htmlFor="ctqvdl" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="clZmCy">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected meta success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="bwNeCf"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI lfNAGO"
+          htmlFor="bwNeCf" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cpvAPz">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected group success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="cFlJXg"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI bQFovI"
+          htmlFor="cFlJXg" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="VJJOi">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected children success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="bqKDgl"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI bQFovI"
+          htmlFor="bqKDgl" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bMjwds">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected inline success!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-14.snap

@@ -0,0 +1,27 @@
+exports[`Checkbox-14 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="cSnJm">
+      Check this out!
+    </label>
+    <div
+      className="toggle__InnerContainer-hKefxl bVmJyd"
+      type="checkbox">
+      <input
+        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+        id="befxrm"
+        type="checkbox" />
+      <label
+        className="toggle__Label-soSmI bQFovI"
+        htmlFor="befxrm" />
+    </div>
+    <label
+      className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+      Thanks for ticking, you are a star!
+    </label>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-16.snap

@@ -0,0 +1,85 @@
+exports[`Checkbox-16 1`] = `
+<div
+  className="Row__Row-kNtYPA bvOcuL">
+  <div
+    className="Col__Col-hCQanm eyxLlE">
+    <fieldset
+      className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+      <div>
+        <div
+          className="Row__Row-kNtYPA bvOcuL">
+          <div
+            className="Col__Col-hCQanm rqKxU">
+            <label
+              className="sc-kpOJdX gxFurI"
+              htmlFor="cENLAs">
+              Check this out!
+            </label>
+            <div
+              className="toggle__InnerContainer-hKefxl bVmJyd"
+              type="checkbox">
+              <input
+                className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+                id="ccSzsU"
+                type="checkbox" />
+              <label
+                className="toggle__Label-soSmI bQFovI"
+                htmlFor="ccSzsU" />
+            </div>
+          </div>
+        </div>
+        <div
+          className="Row__Row-kNtYPA bvOcuL">
+          <div
+            className="Col__Col-hCQanm rqKxU">
+            <label
+              className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+              Thanks for ticking, you are a star!
+            </label>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    className="Col__Col-hCQanm eyxLlE">
+    <fieldset
+      className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+      <div>
+        <div
+          className="Row__Row-kNtYPA bvOcuL">
+          <div
+            className="Col__Col-hCQanm rqKxU">
+            <label
+              className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+              Thanks for ticking, you are a star!
+            </label>
+          </div>
+        </div>
+        <div
+          className="Row__Row-kNtYPA bvOcuL">
+          <div
+            className="Col__Col-hCQanm rqKxU">
+            <label
+              className="sc-kpOJdX gxFurI"
+              htmlFor="cjXfAZ">
+              Check this out!
+            </label>
+            <div
+              className="toggle__InnerContainer-hKefxl bVmJyd"
+              type="checkbox">
+              <input
+                className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+                id="bwLwZw"
+                type="checkbox" />
+              <label
+                className="toggle__Label-soSmI bQFovI"
+                htmlFor="bwLwZw" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-2.snap

@@ -0,0 +1,24 @@
+exports[`Checkbox-2 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <div
+      className="toggle__InnerContainer-hKefxl bVmJyd"
+      type="checkbox">
+      <input
+        checked={true}
+        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+        id="hPPAv"
+        type="checkbox" />
+      <label
+        className="toggle__Label-soSmI bQFovI"
+        htmlFor="hPPAv" />
+    </div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="PDamN">
+      Check this out!
+    </label>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-4.snap

@@ -0,0 +1,24 @@
+exports[`Checkbox-4 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <div
+      className="toggle__InnerContainer-hKefxl bVmJyd"
+      type="checkbox">
+      <input
+        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+        disabled={true}
+        id="PdtKx"
+        type="checkbox" />
+      <label
+        className="toggle__Label-soSmI bQFovI"
+        htmlFor="PdtKx" />
+    </div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="bMuPIw">
+      Check this out!
+    </label>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-6.snap

@@ -0,0 +1,23 @@
+exports[`Checkbox-6 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="cAuiJz">
+      Check this out!
+    </label>
+    <div
+      className="toggle__InnerContainer-hKefxl bVmJyd"
+      type="checkbox">
+      <input
+        className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+        id="kgvuK"
+        type="checkbox" />
+      <label
+        className="toggle__Label-soSmI bQFovI"
+        htmlFor="kgvuK" />
+    </div>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Checkbox-8.snap

@@ -0,0 +1,104 @@
+exports[`Checkbox-8 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="FsQmq"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI ertJBI"
+          htmlFor="FsQmq" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cBGrDG">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected meta warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="beCzTQ"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI ertJBI"
+          htmlFor="beCzTQ" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bYpTvV">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected group warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="bhTblN"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI bQFovI"
+          htmlFor="bhTblN" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="KJKut">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected children warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <div
+        className="toggle__InnerContainer-hKefxl bVmJyd"
+        type="checkbox">
+        <input
+          className="baseline-eRtFHU czaTJi sc-kEYyzF cwbzif"
+          id="ckCLtp"
+          type="checkbox" />
+        <label
+          className="toggle__Label-soSmI bQFovI"
+          htmlFor="ckCLtp" />
+      </div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cwutRI">
+        Check this out!
+      </label>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected inline warning!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/CloseButton-0.snap

@@ -0,0 +1,19 @@
+exports[`CloseButton-0 1`] = `
+<button
+  className="sc-gipzik ebGrvT sc-bxivhb bOlNJJ">
+  <svg
+    className="baseline-hRjYWa iAaryv"
+    height="12"
+    viewBox="0 0 12 12"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg">
+    <title>
+      icon: close
+    </title>
+    <path
+      d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+      fill="#494949"
+      fillRule="evenodd" />
+  </svg>
+</button>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Dropdown-0.snap

@@ -0,0 +1,54 @@
+exports[`Dropdown-0 1`] = `
+<div
+  style={
+    Object {
+      "height": "175px",
+      "position": "relative",
+    }
+  }>
+  <label
+    className="sc-kpOJdX gxFurI"
+    htmlFor="">
+    Service
+  </label>
+  <div
+    className="baseline-eePMVW jLRdeT dropdown__Container-kTmGgR iFAKgB">
+    <select
+      className="dropdown__StyledSelect-dniSqW iGqWTY baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+      defaultValue="Choose"
+      id="">
+      <option
+        disabled={true}
+        value="Choose">
+        Choose
+      </option>
+      <option
+        value="Wordpress">
+        Wordpress
+      </option>
+      <option
+        value="Nginx">
+        Nginx
+      </option>
+      <option
+        value="Percona">
+        Percona
+      </option>
+    </select>
+    <svg
+      className="dropdown__StyledArrowIcon-dcjYYg XaxjJ baseline-dvzlav jFVXMX"
+      height="6"
+      viewBox="0 0 9 6"
+      width="9"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>
+        arrow: right
+      </title>
+      <path
+        d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
+        fill="#494949"
+        fillRule="evenodd" />
+    </svg>
+  </div>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Header-0.snap

@@ -0,0 +1,26 @@
+exports[`Header-0 1`] = `
+<div
+  className="header__Header-cywcLi bChvWj">
+  <div
+    className="brand__Box-cSEQoZ eHrgNF">
+    <h2
+      className="sc-brqgnP imvidU">
+      Triton
+    </h2>
+  </div>
+  <div
+    className="item__Box-hzIdkQ xujDc">
+    <p
+      className="sc-cMljjf jpHqrX">
+      eu-east-1
+    </p>
+  </div>
+  <div
+    className="item__Box-hzIdkQ xujDc">
+    <p
+      className="sc-cMljjf jpHqrX">
+      Nicola
+    </p>
+  </div>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/IconButton-0.snap

@@ -0,0 +1,19 @@
+exports[`IconButton-0 1`] = `
+<button
+  className="baseline-dRZgyZ hkwhiQ sc-jKJlTe hpoBGJ">
+  <svg
+    className="baseline-hRjYWa iAaryv"
+    height="12"
+    viewBox="0 0 12 12"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg">
+    <title>
+      icon: close
+    </title>
+    <path
+      d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
+      fill="#494949"
+      fillRule="evenodd" />
+  </svg>
+</button>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Input-0.snap

@@ -0,0 +1,6 @@
+exports[`Input-0 1`] = `
+<input
+  className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+  id=""
+  placeholder="I am the placeholder" />
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Input-10.snap

@@ -0,0 +1,21 @@
+exports[`Input-10 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="bwQQBD">
+      Email Address
+    </label>
+    <input
+      className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+      id="bwQQBD"
+      placeholder="Enter email"
+      type="email" />
+    <label
+      className="baseline-cAWdSt jOHGnk sc-ckVGcZ fTpqcf">
+      I\'m a children of meta
+    </label>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Input-2.snap

@@ -0,0 +1,21 @@
+exports[`Input-2 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="KxDLL">
+      Email Address
+    </label>
+    <input
+      className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+      id="KxDLL"
+      placeholder="Enter email"
+      type="email" />
+    <small
+      className="sc-dxgOiQ fsmbvY">
+      We\'ll never share your email with anyone else.
+    </small>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Input-4.snap

@@ -0,0 +1,80 @@
+exports[`Input-4 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bWTjQB">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+        id="bWTjQB"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected inline error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cCZWIJ">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV coHhQj"
+        id="cCZWIJ"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected group error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cgBbsv">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV coHhQj"
+        id="cgBbsv"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected meta error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cchqFe">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+        id="cchqFe"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected children error!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Input-6.snap

@@ -0,0 +1,80 @@
+exports[`Input-6 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="CZllp">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+        id="CZllp"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected inline warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bCBhHX">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV jgvuqV"
+        id="bCBhHX"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected group warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="IHrIh">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV jgvuqV"
+        id="IHrIh"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected meta warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bwCYUK">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+        id="bwCYUK"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected children warning!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Input-8.snap

@@ -0,0 +1,80 @@
+exports[`Input-8 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="XPDYM">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+        id="XPDYM"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected inline success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="qdROV">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV jicOQn"
+        id="qdROV"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected group success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bOhxeq">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV jicOQn"
+        id="bOhxeq"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected meta success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bpZMvk">
+        Email Address
+      </label>
+      <input
+        className="baseline-grrZDR eICGBO sc-chPdSV dXKwMH"
+        id="bpZMvk"
+        placeholder="Enter email"
+        type="email" />
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected children success!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/ProgressBar-0.snap

@@ -0,0 +1,93 @@
+exports[`ProgressBar-0 1`] = `
+<ul
+  className="progress-bar__StyledList-fBsebO fWFANq">
+  <li
+    className="baseline-iIgrag kHxfDo item__StyledItem-lfMPWI bnmuPO">
+    <div
+      className="baseline-BQWPM lnCTlm button__StyledContainer-HJcao mNxum">
+      <span
+        className="baseline-dGYsfJ jNkStq indicator__StyledIndicator-jnpRni limCBi">
+        <svg
+          className="indicator__Tick-emlwMD iuRSnB baseline-ekKPvj fmhsHq"
+          completed={true}
+          first={true}
+          height="9"
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg">
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd" />
+        </svg>
+      </span>
+      <button
+        className="button__StyledButton-iitNzs dRQMtG baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+        Name the group
+      </button>
+      <span
+        className="button__StyledArrow-sTwhU cCmWwL" />
+    </div>
+  </li>
+  <li
+    className="baseline-iIgrag kHxfDo item__StyledItem-lfMPWI bnmuPO">
+    <div
+      className="baseline-BQWPM lnCTlm button__StyledContainer-HJcao jrPVRk">
+      <span
+        className="baseline-dGYsfJ jNkStq indicator__StyledIndicator-jnpRni jSkXBk">
+        <svg
+          active={true}
+          className="indicator__Tick-emlwMD jJvzny baseline-ekKPvj fmhsHq"
+          height="9"
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg">
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd" />
+        </svg>
+      </span>
+      <button
+        className="button__StyledButton-iitNzs dRQMtG baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+         Define services
+      </button>
+      <span
+        className="button__StyledArrow-sTwhU cCmWwL" />
+    </div>
+  </li>
+  <li
+    className="baseline-iIgrag kHxfDo item__StyledItem-lfMPWI bnmuPO">
+    <div
+      className="baseline-BQWPM lnCTlm button__StyledContainer-HJcao bZSrGl">
+      <span
+        className="baseline-dGYsfJ jNkStq indicator__StyledIndicator-jnpRni haBONg">
+        <svg
+          className="indicator__Tick-emlwMD fNWovh baseline-ekKPvj fmhsHq"
+          height="9"
+          last={true}
+          viewBox="0 0 9 9"
+          width="9"
+          xmlns="http://www.w3.org/2000/svg">
+          <title>
+            tick
+          </title>
+          <path
+            d="M7.316 0L3.254 5.477l-1.55-2.165L0 4.495 3.223 9 9 1.21z"
+            fillRule="evenodd" />
+        </svg>
+      </span>
+      <button
+        className="button__StyledButton-iitNzs dRQMtG baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+        Review and deploy
+      </button>
+      <span
+        className="button__StyledArrow-sTwhU iwCWSr" />
+    </div>
+  </li>
+</ul>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Radio-0.snap

@@ -0,0 +1,78 @@
+exports[`Radio-0 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <legend
+      className="sc-iAyFgw fDDYCs">
+      Who killed the radio star?
+    </legend>
+    <ul
+      className="sc-hSdWYo bIDotp">
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            checked={true}
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            id="BvHkn"
+            name="who-killed"
+            type="radio"
+            value="video" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="BvHkn" />
+        </div>
+        <label
+          className="sc-kpOJdX gxFurI"
+          htmlFor="BvHkn">
+          Video
+        </label>
+      </li>
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            id="crRuJS"
+            name="who-killed"
+            type="radio"
+            value="tv" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="crRuJS" />
+        </div>
+        <label
+          className="sc-kpOJdX gxFurI"
+          htmlFor="crRuJS">
+          TV
+        </label>
+      </li>
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            id="bpkHF"
+            name="who-killed"
+            type="radio"
+            value="netflix" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="bpkHF" />
+        </div>
+        <label
+          className="sc-kpOJdX gxFurI"
+          htmlFor="bpkHF">
+          Netflix
+        </label>
+      </li>
+    </ul>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Radio-10.snap

@@ -0,0 +1,69 @@
+exports[`Radio-10 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <legend
+      className="sc-iAyFgw fDDYCs">
+      Who killed the radio star?
+    </legend>
+    <label
+      className="baseline-cAWdSt jOHGnk sc-ckVGcZ bDXFYs">
+      I\'m a children of meta
+    </label>
+    <ul
+      className="sc-hSdWYo bIDotp">
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            id="xqZtm"
+            name="who-killed"
+            type="radio"
+            value="video" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="xqZtm" />
+        </div>
+        Video
+      </li>
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            id="wLgbp"
+            name="who-killed"
+            type="radio"
+            value="tv" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="wLgbp" />
+        </div>
+        TV
+      </li>
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            id="bVQcBn"
+            name="who-killed"
+            type="radio"
+            value="netflix" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="bVQcBn" />
+        </div>
+        Netflix
+      </li>
+    </ul>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Radio-2.snap

@@ -0,0 +1,68 @@
+exports[`Radio-2 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <legend
+      className="sc-iAyFgw fDDYCs">
+      Who killed the radio star?
+    </legend>
+    <ul
+      className="sc-hSdWYo bIDotp">
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            disabled={true}
+            id="ckSJIN"
+            name="who-killed"
+            type="radio"
+            value="video" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="ckSJIN" />
+        </div>
+        Video
+      </li>
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            disabled={true}
+            id="fvuEh"
+            name="who-killed"
+            type="radio"
+            value="tv" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="fvuEh" />
+        </div>
+        TV
+      </li>
+      <li
+        className="radio__Li-hRYgmp dhbKVQ">
+        <div
+          className="toggle__InnerContainer-hKefxl bVmJyd"
+          type="radio">
+          <input
+            className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+            disabled={true}
+            id="omgcA"
+            name="who-killed"
+            type="radio"
+            value="netflix" />
+          <label
+            className="toggle__Label-soSmI gCagwo"
+            htmlFor="omgcA" />
+        </div>
+        Netflix
+      </li>
+    </ul>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Radio-4.snap

@@ -0,0 +1,272 @@
+exports[`Radio-4 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected inline error!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cgTtxc"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="cgTtxc" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="qGHRS"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="qGHRS" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="dhYkV"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="dhYkV" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected group error!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="ckfzgF"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI cuZNED"
+              htmlFor="ckfzgF" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bqPlCY"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI cuZNED"
+              htmlFor="bqPlCY" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="txghV"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI cuZNED"
+              htmlFor="txghV" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected meta error!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="crhMGo"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI cuZNED"
+              htmlFor="crhMGo" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bqBuCE"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI cuZNED"
+              htmlFor="bqBuCE" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cqZXwC"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI cuZNED"
+              htmlFor="cqZXwC" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ fXcuBw">
+        Unexpected children error!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="brvELW"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="brvELW" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cAlLld"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="cAlLld" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="JRBUI"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="JRBUI" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Radio-6.snap

@@ -0,0 +1,272 @@
+exports[`Radio-6 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected inline warning!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bWQEBf"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="bWQEBf" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bJSqSe"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="bJSqSe" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cBrBsk"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="cBrBsk" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected group warning!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bPqPGO"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI iPYvFO"
+              htmlFor="bPqPGO" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bHUcSW"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI iPYvFO"
+              htmlFor="bHUcSW" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="aLCiX"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI iPYvFO"
+              htmlFor="aLCiX" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected meta warning!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bKyptB"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI iPYvFO"
+              htmlFor="bKyptB" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="Tplcf"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI iPYvFO"
+              htmlFor="Tplcf" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="ciCbft"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI iPYvFO"
+              htmlFor="ciCbft" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kglHzx">
+        Unexpected children warning!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bzjYaT"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="bzjYaT" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="RSKvU"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="RSKvU" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bHbNwI"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="bHbNwI" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Radio-8.snap

@@ -0,0 +1,272 @@
+exports[`Radio-8 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected inline success!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cGdKXP"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="cGdKXP" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="beMXau"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="beMXau" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bEShBt"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="bEShBt" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected group success!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="jrXgk"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI ecfPhl"
+              htmlFor="jrXgk" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cmSnhh"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI ecfPhl"
+              htmlFor="cmSnhh" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="hPEzV"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI ecfPhl"
+              htmlFor="hPEzV" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected meta success!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cspGMm"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI ecfPhl"
+              htmlFor="cspGMm" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bhvMKn"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI ecfPhl"
+              htmlFor="bhvMKn" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="bTCglY"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI ecfPhl"
+              htmlFor="bTCglY" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <legend
+        className="sc-iAyFgw fDDYCs">
+        Who killed the radio star?
+      </legend>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ etALwH">
+        Unexpected children success!
+      </label>
+      <ul
+        className="sc-hSdWYo bIDotp">
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="hGiUq"
+              name="who-killed"
+              type="radio"
+              value="video" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="hGiUq" />
+          </div>
+          Video
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="cGmweu"
+              name="who-killed"
+              type="radio"
+              value="tv" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="cGmweu" />
+          </div>
+          TV
+        </li>
+        <li
+          className="radio__Li-hRYgmp dhbKVQ">
+          <div
+            className="toggle__InnerContainer-hKefxl bVmJyd"
+            type="radio">
+            <input
+              className="baseline-imhrAe cnnTnF sc-kEYyzF cwbzif"
+              id="RMsNf"
+              name="who-killed"
+              type="radio"
+              value="netflix" />
+            <label
+              className="toggle__Label-soSmI gCagwo"
+              htmlFor="RMsNf" />
+          </div>
+          Netflix
+        </li>
+      </ul>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/SectionList-0.snap

@@ -0,0 +1,47 @@
+exports[`SectionList-0 1`] = `
+<ul
+  className="baseline-LlDMp hhjWUX section-list__UnorderedList-fejFlV jlJaVM">
+  <li
+    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    <a
+      className="active sc-jDwBTQ iVPvUR">
+      Overview
+    </a>
+  </li>
+  <li
+    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    <a
+      className="sc-jDwBTQ iVPvUR">
+      Services
+    </a>
+  </li>
+  <li
+    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    <a
+      className="sc-jDwBTQ iVPvUR">
+      Instances
+    </a>
+  </li>
+  <li
+    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    <a
+      className="sc-jDwBTQ iVPvUR">
+      Versions
+    </a>
+  </li>
+  <li
+    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    <a
+      className="sc-jDwBTQ iVPvUR">
+      Manifest
+    </a>
+  </li>
+  <li
+    className="baseline-jwGfhW dhkNKl item__Li-bkOqhh gpsnTo">
+    <a
+      className="sc-jDwBTQ iVPvUR">
+      Settings
+    </a>
+  </li>
+</ul>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-0.snap

@@ -0,0 +1,30 @@
+exports[`Select-0 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="btFTGx">
+      Your location
+    </label>
+    <select
+      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+      id="btFTGx"
+      placeholder="Select Location">
+      <option
+        value="1">
+        Amsterdam, EU
+      </option>
+      <option>
+        San Francisco, USA
+      </option>
+      <option>
+        Seoul, South Korea
+      </option>
+      <option>
+        Tokyo, Japan
+      </option>
+    </select>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-10.snap

@@ -0,0 +1,124 @@
+exports[`Select-10 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bWPctT">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+        id="bWPctT">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected inline warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="gknAd">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL cEWfwg"
+        id="gknAd">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected group warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bmjoRO">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL cEWfwg"
+        id="bmjoRO">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected meta warning!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="cuCWwE">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+        id="cuCWwE">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ kDNdxy">
+        Unexpected children warning!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-12.snap

@@ -0,0 +1,124 @@
+exports[`Select-12 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="keUQa">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+        id="keUQa">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected inline error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="iwFBn">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL dHVowQ"
+        id="iwFBn">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected group error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bHPIwo">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL dHVowQ"
+        id="bHPIwo">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected meta error!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="fxnTI">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+        id="fxnTI">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ awics">
+        Unexpected children error!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-14.snap

@@ -0,0 +1,124 @@
+exports[`Select-14 1`] = `
+<div>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="bhLOPM">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+        id="bhLOPM">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected inline success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="ccbPvB">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL dqhDPf"
+        id="ccbPvB">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected group success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="czSslB">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL dqhDPf"
+        id="czSslB">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected meta success!
+      </label>
+    </div>
+  </fieldset>
+  <fieldset
+    className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+    <div>
+      <label
+        className="sc-kpOJdX gxFurI"
+        htmlFor="begiLB">
+        Your location
+      </label>
+      <select
+        className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+        id="begiLB">
+        <option>
+          Amsterdam, EU
+        </option>
+        <option>
+          San Francisco, USA
+        </option>
+        <option>
+          Seoul, South Korea
+        </option>
+        <option>
+          Tokyo, Japan
+        </option>
+      </select>
+      <label
+        className="baseline-cAWdSt jOHGnk sc-ckVGcZ hrcGEd">
+        Unexpected children success!
+      </label>
+    </div>
+  </fieldset>
+</div>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-16.snap

@@ -0,0 +1,32 @@
+exports[`Select-16 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="bQztBr">
+      Your location
+    </label>
+    <select
+      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+      id="bQztBr">
+      <option>
+        Amsterdam, EU
+      </option>
+      <option>
+        San Francisco, USA
+      </option>
+      <option>
+        Seoul, South Korea
+      </option>
+      <option>
+        Tokyo, Japan
+      </option>
+    </select>
+    <label
+      className="baseline-cAWdSt jOHGnk sc-ckVGcZ fTpqcf">
+      I\'m a children of meta!
+    </label>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-2.snap

@@ -0,0 +1,23 @@
+exports[`Select-2 1`] = `
+<select
+  className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+  id="">
+  <option
+    disabled={true}
+    selected={true}>
+    Select a datacenter
+  </option>
+  <option>
+    Amsterdam, EU
+  </option>
+  <option>
+    San Francisco, USA
+  </option>
+  <option>
+    Seoul, South Korea
+  </option>
+  <option>
+    Tokyo, Japan
+  </option>
+</select>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-4.snap

@@ -0,0 +1,35 @@
+exports[`Select-4 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="bTuDhz">
+      Your location
+    </label>
+    <select
+      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+      disabled={true}
+      id="bTuDhz">
+      <option
+        disabled={true}
+        selected={true}>
+        Select Location
+      </option>
+      <option
+        value="1">
+        Amsterdam, EU
+      </option>
+      <option>
+        San Francisco, USA
+      </option>
+      <option>
+        Seoul, South Korea
+      </option>
+      <option>
+        Tokyo, Japan
+      </option>
+    </select>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-6.snap

@@ -0,0 +1,34 @@
+exports[`Select-6 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="bqstTY">
+      Your location
+    </label>
+    <select
+      className="baseline-isNNDV dMweWC sc-eHgmQL jhMtlq"
+      id="bqstTY">
+      <option
+        disabled={true}
+        selected={true}>
+        Select Location
+      </option>
+      <option
+        value="1">
+        Amsterdam, EU
+      </option>
+      <option>
+        San Francisco, USA
+      </option>
+      <option>
+        Seoul, South Korea
+      </option>
+      <option>
+        Tokyo, Japan
+      </option>
+    </select>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Select-8.snap

@@ -0,0 +1,29 @@
+exports[`Select-8 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <label
+      className="sc-kpOJdX gxFurI"
+      htmlFor="YiYIR">
+      Your location
+    </label>
+    <select
+      className="baseline-isNNDV dMweWC sc-eHgmQL ljfWFB"
+      id="YiYIR"
+      multiple={true}>
+      <option>
+        Amsterdam, EU
+      </option>
+      <option>
+        San Francisco, USA
+      </option>
+      <option>
+        Seoul, South Korea
+      </option>
+      <option>
+        Tokyo, Japan
+      </option>
+    </select>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-0.snap

@@ -0,0 +1,71 @@
+exports[`Toggle-0 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <legend
+      className="sc-iAyFgw fDDYCs">
+      Who killed the radio star?
+    </legend>
+    <ul
+      className="sc-jWBwVP kOnUfl">
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="emnfZ">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="mftvO"
+            name="who-killed"
+            type="radio"
+            value="video" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="mftvO">
+            Video
+          </label>
+        </div>
+      </li>
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="emnfZ">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="cbaohD"
+            name="who-killed"
+            type="radio"
+            value="tv" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="cbaohD">
+            TV
+          </label>
+        </div>
+      </li>
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="emnfZ">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="bQoRat"
+            name="who-killed"
+            type="radio"
+            value="netflix" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="bQoRat">
+            Netflix
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-2.snap

@@ -0,0 +1,71 @@
+exports[`Toggle-2 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <legend
+      className="sc-iAyFgw fDDYCs">
+      Who killed the radio star?
+    </legend>
+    <ul
+      className="sc-jWBwVP kOnUfl">
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="XXgft">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={true}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="chLDPo"
+            name="who-killed"
+            type="radio"
+            value="video" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="chLDPo">
+            Video
+          </label>
+        </div>
+      </li>
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="XXgft">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="bONojW"
+            name="who-killed"
+            type="radio"
+            value="tv" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="bONojW">
+            TV
+          </label>
+        </div>
+      </li>
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="XXgft">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="bEadAF"
+            name="who-killed"
+            type="radio"
+            value="netflix" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="bEadAF">
+            Netflix
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-4.snap

@@ -0,0 +1,52 @@
+exports[`Toggle-4 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <legend
+      className="sc-iAyFgw fDDYCs">
+      Who killed the radio star?
+    </legend>
+    <ul
+      className="sc-jWBwVP kOnUfl">
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="IHOBE">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={true}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="cgQHuW"
+            name="who-killed"
+            type="radio"
+            value="tv" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="cgQHuW">
+            TV
+          </label>
+        </div>
+      </li>
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="IHOBE">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            id="bkDCZy"
+            name="who-killed"
+            type="radio"
+            value="netflix" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="bkDCZy">
+            Netflix
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Toggle-6.snap

@@ -0,0 +1,74 @@
+exports[`Toggle-6 1`] = `
+<fieldset
+  className="baseline-hZpvlZ bQdLhh sc-kGXeez cEabLf">
+  <div>
+    <legend
+      className="sc-iAyFgw fDDYCs">
+      Who killed the radio star?
+    </legend>
+    <ul
+      className="sc-jWBwVP kOnUfl">
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="cuAoVE">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            disabled={true}
+            id="bvuirh"
+            name="who-killed"
+            type="radio"
+            value="video" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="bvuirh">
+            Video
+          </label>
+        </div>
+      </li>
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="cuAoVE">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            disabled={true}
+            id="cotudm"
+            name="who-killed"
+            type="radio"
+            value="tv" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="cotudm">
+            TV
+          </label>
+        </div>
+      </li>
+      <li
+        className="toggle__Li-NAdHA fguoyM"
+        id="cuAoVE">
+        <div
+          className="toggle__InputContainer-jJfPwy gGKbok">
+          <input
+            checked={false}
+            className="baseline-eDpFvF hpgOJY sc-cvbbAY gByntD"
+            disabled={true}
+            id="DWepz"
+            name="who-killed"
+            type="radio"
+            value="netflix" />
+          <label
+            className="toggle__Label-biqdhu cWnfSi"
+            htmlFor="DWepz">
+            Netflix
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</fieldset>
+`;

packages/ui-toolkit/.snapguidist/__snapshots__/Tooltip-0.snap

@@ -0,0 +1,42 @@
+exports[`Tooltip-0 1`] = `
+<div
+  style={
+    Object {
+      "height": "175px",
+      "position": "relative",
+    }
+  }>
+  <div
+    className="tooltip__StyledContainer-gwWLSj yHfYI">
+    <ul
+      className="tooltip__StyledList-hiwjLp ceuwoA">
+      <li>
+        <button
+          className="button__StyledButton-bftYPm fsbLbi baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+          Scale
+        </button>
+      </li>
+      <li>
+        <button
+          className="button__StyledButton-bftYPm fsbLbi baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+          Restart
+        </button>
+      </li>
+      <li>
+        <button
+          className="button__StyledButton-bftYPm fsbLbi baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+          Stop
+        </button>
+      </li>
+      <div
+        className="divider__TooltipDivider-gCdvnL dXMfFY" />
+      <li>
+        <button
+          className="button__StyledButton-bftYPm fsbLbi baseline-jkhKOg bGfvGf sc-bxivhb bOlNJJ">
+          Delete
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+`;

packages/ui-toolkit/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "camel-case": "^3.0.0",
-    "d3": "^4.9.1",
+    "d3": "^4.10.0",
     "disable-scroll": "^0.3.0",
     "lodash.difference": "^4.5.0",
     "lodash.differenceby": "^4.8.0",
@@ -37,21 +37,21 @@
     "lodash.isequalwith": "^4.4.0",
     "lodash.isstring": "^4.0.1",
     "normalized-styled-components": "^1.0.8",
-    "polished": "^1.1.3",
+    "polished": "^1.3.0",
     "prop-types": "^15.5.10",
     "react-broadcast": "^0.1.2",
-    "react-styled-flexboxgrid": "^2.0.1",
+    "react-styled-flexboxgrid": "^2.0.3",
     "reduce-css-calc": "^2.0.5",
     "remcalc": "^1.0.8",
     "rnd-id": "^1.0.8",
-    "styled-components": "^2.1.0",
+    "styled-components": "^2.1.1",
     "styled-is": "^1.0.11",
     "unitcalc": "^1.0.8"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-plugin-inline-react-svg": "^0.4.0",
-    "babel-plugin-styled-components": "^1.1.4",
+    "babel-plugin-styled-components": "^1.1.7",
     "babel-preset-joyent-portal": "^1.0.3",
     "cross-env": "^5.0.1",
     "eslint": "^3.19.0",
@@ -60,32 +60,32 @@
     "jest-diff": "^20.0.3",
     "jest-matcher-utils": "^20.0.3",
     "jest-snapshot": "^20.0.3",
-    "jest-styled-components": "^3.0.2",
+    "jest-styled-components": "^4.2.2",
     "react": "^15.6.1",
-    "react-docgen": "^2.16.0",
+    "react-docgen": "^2.17.0",
     "react-docgen-displayname-handler": "^1.0.0",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
-    "react-router-dom": "^4.1.1",
+    "react-router-dom": "^4.1.2",
-    "react-scripts": "^1.0.7",
+    "react-scripts": "^1.0.10",
-    "react-styleguidist": "^5.4.4",
+    "react-styleguidist": "^5.5.9",
     "react-test-renderer": "^15.6.1",
     "redrun": "^5.9.15",
-    "redux": "^3.6.0",
+    "redux": "^3.7.2",
-    "redux-form": "^7.0.0",
+    "redux-form": "^7.0.2",
-    "snapguidist": "^1.1.2",
+    "snapguidist": "^2.0.0",
-    "stylelint": "^7.11.1",
+    "stylelint": "^8.0.0",
-    "stylelint-config-primer": "^1.4.0",
+    "stylelint-config-primer": "^2.0.0",
-    "stylelint-config-standard": "^16.0.0",
+    "stylelint-config-standard": "^17.0.0",
-    "stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#68b4c4f",
+    "stylelint-processor-styled-components": "styled-components/stylelint-processor-styled-components#2a33b5f",
     "tinycolor2": "^1.4.1",
     "title-case": "^2.1.1",
-    "webpack": "^2.6.1"
+    "webpack": "^3.4.1"
   },
   "peerDependencies": {
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "react-router-dom": "^4.1.1",
+    "react-router-dom": "^4.1.2",
-    "redux-form": "^7.0.0"
+    "redux-form": "^7.0.2"
   }
 }

packages/ui-toolkit/src/basealign/index.js

@@ -1,4 +1,3 @@
-import unitcalc from 'unitcalc';
 import styled from 'styled-components';
 import camelCase from 'camel-case';
 
@@ -16,5 +15,7 @@ const alignsFromProps = props =>
 
 export default Component =>
   Component.extend
-    ? Component.extend`${alignsFromProps}`
+    ? Component.extend`
+        ${alignsFromProps};
+      `
     : styled(Component)`${alignsFromProps}`;

packages/ui-toolkit/src/baseline/index.js

@@ -30,5 +30,7 @@ const unitsFromProps = props =>
 
 export default Component =>
   Component.extend
-    ? Component.extend`${unitsFromProps}`
+    ? Component.extend`
+        ${unitsFromProps};
+      `
     : styled(Component)`${unitsFromProps}`;

packages/ui-toolkit/src/button/index.js

@@ -157,7 +157,7 @@ const StyledButton = NButton.extend`
 
 const StyledAnchor = A.extend`
   display: inline-block;
-  ${style}
+  ${style};
 `;
 
 const StyledLink = styled(Link)`

packages/ui-toolkit/src/card/info.js

@@ -6,7 +6,7 @@ import Label from '../label';
 
 const StyledLabel = Label.extend`
   ${props => (props.color === 'light' ? `color: ${props.theme.white};` : '')};
-  margin-left: ${props => (props.iconPosition === 'left' ? remcalc(24) : 0)}
+  margin-left: ${props => (props.iconPosition === 'left' ? remcalc(24) : 0)};
 `;
 
 const StyledIconContainer = styled.div`

packages/ui-toolkit/src/card/meta.js

@@ -2,7 +2,6 @@ import { Row, Col } from 'react-styled-flexboxgrid';
 import { Subscriber } from 'react-broadcast';
 import Baseline from '../baseline';
 import is from 'styled-is';
-import remcalc from 'remcalc';
 import PropTypes from 'prop-types';
 import View from './view';
 import React from 'react';

packages/ui-toolkit/src/card/title.js

@@ -49,7 +49,11 @@ const Span = styled.span`
 `;
 
 const Title = ({ children, ...rest }) => {
-  const _children = isString(children) ? <Span>{children}</Span> : children;
+  const _children = isString(children)
+    ? <Span>
+        {children}
+      </Span>
+    : children;
 
   const render = ({ collapsed = false, fromHeader = false }) =>
     <Container

packages/ui-toolkit/src/close-button/index.js

@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
-import styled from 'styled-components';
 import unitcalc from 'unitcalc';
 import theme from '../theme';
 import Button from '../button';

packages/ui-toolkit/src/dropdown/index.js

@@ -95,9 +95,13 @@ class Dropdown extends Component {
           onClick={this.toggleDropdown}
           {...rest}
         >
-          <option disabled value={placeholder}>{placeholder}</option>
+          <option disabled value={placeholder}>
+            {placeholder}
+          </option>
           {data.map((val, index) =>
-            <option value={val} key={index}>{val}</option>
+            <option value={val} key={index}>
+              {val}
+            </option>
           )}
         </StyledSelect>
         <StyledArrowIcon onClick={this.toggleDropdown} />

packages/ui-toolkit/src/form/base/input.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import typography from '../../typography';
-import { insetShaddow, borderRadius, border } from '../../boxes';
+import { borderRadius, border } from '../../boxes';
 import { Subscriber } from 'react-broadcast';
 import styled, { css } from 'styled-components';
 import remcalc from 'remcalc';
@@ -101,9 +101,8 @@ BaseInput.propTypes = {
 export default BaseInput;
 
 export const Stylable = Component => {
-  const stylable = typeof Component === 'string'
+  const stylable =
-    ? styled[Component]
+    typeof Component === 'string' ? styled[Component] : styled(Component);
-    : styled(Component);
 
   return stylable`
     ${style}

packages/ui-toolkit/src/form/number-input.js

@@ -1,7 +1,7 @@
+import React from 'react';
 import BaseInput, { Stylable } from './base/input';
 import { Subscriber } from 'react-broadcast';
 import Baseline from '../baseline';
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import IconButton from '../icon-button';
@@ -22,8 +22,6 @@ const StyledNumberInput = styled(BaseInput(Stylable('input')))`
  * @example ./usage-number-input.md
  */
 const NumberInput = BaseInput(props => {
-  const { children, minValue, maxValue, ...rest } = props;
-
   const render = value => {
     const handleMinusClick = evt => {
       evt.preventDefault();

packages/ui-toolkit/src/icon-button/index.js

@@ -94,7 +94,7 @@ const StyledButton = NButton.extend`
 
 const StyledAnchor = A.extend`
   display: inline-block;
-  ${style}
+  ${style};
 `;
 
 const StyledLink = styled(Link)`

packages/ui-toolkit/src/icons/minus.js

@@ -5,4 +5,4 @@ import React from 'react';
 
 import MinusIcon from './svg/icon_minus.svg';
 
-export default Basealign(MinusIcon);
+export default Baseline(Basealign(MinusIcon));

packages/ui-toolkit/src/icons/plus.js

@@ -5,4 +5,4 @@ import React from 'react';
 
 import CloseIcon from './svg/icon_plus.svg';
 
-export default Baseline(CloseIcon);
+export default Baseline(Basealign(CloseIcon));

packages/ui-toolkit/src/modal/index.js

@@ -4,8 +4,7 @@ import styled from 'styled-components';
 import disableScroll from 'disable-scroll';
 import remcalc from 'remcalc';
 import theme from '../theme';
-import { border, borderRadius, modalShadow } from '../boxes';
+import { modalShadow } from '../boxes';
-import Button from '../button';
 import CloseButton from '../close-button';
 import P from '../text/p';
 import { H2 } from '../text/headings';

packages/ui-toolkit/src/progress-bar/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import theme from '../theme';
-import Baseline from '../baseline';
 
 const StyledList = styled.ul`
   display: table;

packages/ui-toolkit/src/progress-bar/indicator.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 import Baseline from '../baseline';
 import { TickIcon } from '../icons';
-import is, { isNot, isOr } from 'styled-is';
+import is, { isOr } from 'styled-is';
 
 const Tick = styled(TickIcon)`
   fill: none;

packages/ui-toolkit/src/section-list/usage.md

@@ -1,37 +1,37 @@
 ```
 const Item = require('./item').default;
-const Link = require('./link').default;
+const Anchor = require('./item').Anchor;
 
 <SectionList>
   <Item>
-    <Link className='active'>
+    <Anchor className='active'>
       Overview
-    </Link>
+    </Anchor>
   </Item>
   <Item>
-    <Link>
+    <Anchor>
       Services
-    </Link>
+    </Anchor>
   </Item>
   <Item>
-    <Link>
+    <Anchor>
       Instances
-    </Link>
+    </Anchor>
   </Item>
   <Item>
-    <Link>
+    <Anchor>
       Versions
-    </Link>
+    </Anchor>
   </Item>
   <Item>
-    <Link>
+    <Anchor>
       Manifest
-    </Link>
+    </Anchor>
   </Item>
   <Item>
-    <Link>
+    <Anchor>
       Settings
-    </Link>
+    </Anchor>
   </Item>
 </SectionList>
 ```

packages/ui-toolkit/src/status-loader/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 const animationName = keyframes`
@@ -26,10 +26,9 @@ const StyledThirdRect = StyledFirstRect.extend`
   animation-delay: 1s;
 `;
 
-export default () => (
+export default () =>
-  <svg width='28' height='10'>
+  <svg width="28" height="10">
-    <StyledFirstRect x='2' y='2' width='6' height='6' />
+    <StyledFirstRect x="2" y="2" width="6" height="6" />
-    <StyledSecondRect x='11' y='2' width='6' height='6' />
+    <StyledSecondRect x="11" y="2" width="6" height="6" />
-    <StyledThirdRect x='20' y='2' width='6' height='6' />
+    <StyledThirdRect x="20" y="2" width="6" height="6" />
-  </svg>
+  </svg>;
-);

packages/ui-toolkit/src/theme/colors.js

@@ -60,15 +60,18 @@ const Color = ({ name, hex }) =>
     <Preview hex={hex} />
     <InnerBox background={hex} text={mostReadable(hex)}>
       <Paragraph>
-        <Strong>Name</Strong>: <br />{titleCase(name)}
+        <Strong>Name</Strong>: <br />
+        {titleCase(name)}
       </Paragraph>
       <br />
       <Paragraph>
-        <Strong>Property</Strong>: <br /><code>{name}</code>
+        <Strong>Property</Strong>: <br />
+        <code>{name}</code>
       </Paragraph>
       <br />
       <Paragraph>
-        <Strong>Hex</Strong>: <br /><code>{hex.toUpperCase()}</code>
+        <Strong>Hex</Strong>: <br />
+        <code>{hex.toUpperCase()}</code>
       </Paragraph>
     </InnerBox>
   </Box>;

packages/ui-toolkit/src/tooltip/tooltip.js

@@ -32,7 +32,8 @@ const StyledList = styled.ul`
   border-radius: ${borderRadius};
   z-index: 1;
 
-  &:after, &:before {
+  &:after,
+  &:before {
     content: "";
     position: absolute;
     bottom: 100%;

packages/ui-toolkit/src/topology/functions.js

@@ -1,7 +1,6 @@
 import Constants from './constants';
 
 const getAngleFromPoints = (source, target) => {
-
   const lineAngle = Math.atan2(target.y - source.y, target.x - source.x);
   const lineAngleDeg = lineAngle * 180 / Math.PI;
   const zeroToThreeSixty = lineAngleDeg < 0 ? 360 + lineAngleDeg : lineAngleDeg;
@@ -99,39 +98,36 @@ const calculateLineLayout = ({ source, target }) => {
   };
 };
 
-const getStatusesLength = (data) =>
+const getStatusesLength = data =>
-  data.transitionalStatus
+  data.transitionalStatus ? 1 : data.instanceStatuses.length;
-    ? 1
-    : data.instanceStatuses.length;
-
-const getStatusesHeight = (data) => {
 
+const getStatusesHeight = data => {
   const statuses = data.children
-    ? data.children.reduce((statuses, child) =>
+    ? data.children.reduce(
-      statuses + getStatusesLength(child), 0)
+        (statuses, child) => statuses + getStatusesLength(child),
+        0
+      )
     : getStatusesLength(data);
 
-  return statuses
+  return statuses ? Constants.statusHeight * statuses + 6 : 0;
-    ? Constants.statusHeight*statuses + 6
+};
-    : 0;
-}
 
 const getContentRect = (data, isChild = false) => {
   const contentSize = isChild
     ? Constants.childContentSize
     : Constants.contentSize;
 
-    const { width, height } = contentSize;
+  const { height } = contentSize;
   const contentHeight = height + getStatusesHeight(data);
 
-    return ({
+  return {
     ...Constants.contentPosition,
     width: contentSize.width,
     height: contentHeight
-    });
+  };
-}
+};
 
-const getNodeRect = (data) => {
+const getNodeRect = data => {
   const nodeSize = data.children
     ? Constants.nodeSizeWithChildren
     : Constants.nodeSize;
@@ -139,14 +135,14 @@ const getNodeRect = (data) => {
   const { width, height } = nodeSize;
   const nodeHeight = height + getStatusesHeight(data);
 
-  return ({
+  return {
     left: -width / 2,
     right: width / 2,
     top: -height / 2,
     bottom: nodeHeight - height / 2,
     width,
     height: nodeHeight
-  })
+  };
 };
 
 export { getContentRect, getNodeRect, calculateLineLayout };

packages/ui-toolkit/src/topology/index.js

@@ -43,16 +43,24 @@ class Topology extends React.Component {
       if (changed.added || changed.removed) {
         return changed;
       }
-      const service = services.filter(service => service.id === nextService.id).shift();
+      const service = services
-      const connectionsAdded = difference(nextService.connections, service.connections).length;
+        .filter(service => service.id === nextService.id)
+        .shift();
+      const connectionsAdded = difference(
+        nextService.connections,
+        service.connections
+      ).length;
       // there's a new connection, we need to redraw
       if (connectionsAdded) {
-        return ({ added: true });
+        return { added: true };
       }
-      const connectionsRemoved = difference(service.connections, nextService.connections).length;
+      const connectionsRemoved = difference(
+        service.connections,
+        nextService.connections
+      ).length;
       // we'll need to remove the offending connections from links
       if (connectionsRemoved) {
-        return ({ removed: true});
+        return { removed: true };
       }
       return changed;
     }, {});
@@ -61,14 +69,17 @@ class Topology extends React.Component {
   getNextLinks(nextServices) {
     const links = this.state.links;
     return links.reduce((nextLinks, link) => {
-      const sourceExists = nextServices.filter(nextService =>
+      const sourceExists = nextServices.filter(
-        nextService.id === link.source.id);
+        nextService => nextService.id === link.source.id
+      );
       if (sourceExists.length) {
         const source = sourceExists.shift();
-        const targetExists = nextServices.filter(nextService =>
+        const targetExists = nextServices.filter(
-          nextService.id === link.target.id).length;
+          nextService => nextService.id === link.target.id
-        const connectionExists = source.connections.filter(connection =>
+        ).length;
-          connection === link.target.id).length;
+        const connectionExists = source.connections.filter(
+          connection => connection === link.target.id
+        ).length;
         if (targetExists && connectionExists) {
           nextLinks.push(link);
         }
@@ -81,7 +92,9 @@ class Topology extends React.Component {
     const nodes = this.state.nodes;
     // let notConnectedX = 0;
     return nodes.reduce((nextNodes, node) => {
-      const keep = nextServices.filter(nextService => nextService.id === node.id).length;
+      const keep = nextServices.filter(
+        nextService => nextService.id === node.id
+      ).length;
       if (keep) {
         nextNodes.push(node);
       }
@@ -95,45 +108,53 @@ class Topology extends React.Component {
     // on other updates, we should update the services on the state and that's it
     // we should forceUpdate once the state has been updated
     const nextServices = nextProps.services.sort();
-    const connectedNextServices = nextServices.filter(service => service.connected);
+    const connectedNextServices = nextServices.filter(
-    const notConnectedNextServices = nextServices.filter(service => !service.connected);
+      service => service.connected
+    );
+    const notConnectedNextServices = nextServices.filter(
+      service => !service.connected
+    );
 
-    const { services, nodes } = this.state;
+    const { services } = this.state;
     if (nextServices.length > services.length) {
       // new service added, we need to redraw
       this.create(nextProps);
-    }
+    } else if (nextServices.length <= services.length) {
-    else if(nextServices.length <= services.length) {
-
       const servicesRemoved = differenceBy(services, nextServices, 'id');
       const servicesChanged = differenceBy(nextServices, services, 'id');
-      if(servicesChanged.length ||
+      if (
-        servicesRemoved.length !== services.length - nextServices.length) {
+        servicesChanged.length ||
+        servicesRemoved.length !== services.length - nextServices.length
+      ) {
         this.create(nextProps);
-      }
+      } else {
-      else {
         // check whether there are new connections. if so, we need to redraw
         // if we just dropped one, we need to remove it from links
         // comparison to yield 3 possible outcomes; no change, added, dropped
-        const changedConnections = this.getChangedConnections(services, nextServices);
+        const changedConnections = this.getChangedConnections(
+          services,
+          nextServices
+        );
         // if connections are added, we'll need to redraw
         if (changedConnections.added) {
           this.create(nextProps);
-        }
+        } else if (servicesRemoved.length || changedConnections.removed) {
-        else if(servicesRemoved.length || changedConnections.removed) {
-
           const nextNodes = this.getNextNodes(connectedNextServices);
-          const notConnectedNodes = this.getNotConnectedNodes(notConnectedNextServices);
+          const notConnectedNodes = this.getNotConnectedNodes(
+            notConnectedNextServices
+          );
           const nextLinks = this.getNextLinks(nextServices);
 
-          this.setState({
+          this.setState(
+            {
               services: nextServices,
               links: nextLinks,
               nodes: nextNodes,
               notConnectedNodes
-          }, () => this.forceUpdate());
+            },
-        }
+            () => this.forceUpdate()
-        else {
+          );
+        } else {
           // we've got the same services, no links changed, so we just need to set them to the state
           this.setState({ services: nextServices }, () => this.forceUpdate());
         }
@@ -148,11 +169,11 @@ class Topology extends React.Component {
         ? svgSize.width - Constants.nodeSize.width
         : (Constants.nodeSize.width + 10) * index;
 
-      return ({
+      return {
         id: notConnectedService.id,
         x,
         y: 0
-      })
+      };
     });
   }
 
@@ -168,18 +189,24 @@ class Topology extends React.Component {
     const notConnectedServices = services.filter(service => !service.connected);
     const svgSize = this.getSvgSize();
 
-    const { nodes, links, simulation } = createSimulation(connectedServices, svgSize);
+    const { nodes, links, simulation } = createSimulation(
+      connectedServices,
+      svgSize
+    );
     const notConnectedNodes = this.getNotConnectedNodes(notConnectedServices);
 
-    this.setState({
+    this.setState(
+      {
         notConnectedNodes,
         nodes,
         links,
         simulation,
         services
-    }, () => {
+      },
+      () => {
         this.forceUpdate();
-    });
+      }
+    );
   }
 
   getSvgSize() {
@@ -236,8 +263,9 @@ class Topology extends React.Component {
   }
 
   getNotConnectedNodePosition(nodeId) {
-    return this.state.notConnectedNodes.filter(ncn =>
+    return this.state.notConnectedNodes
-      ncn.id === nodeId).shift();
+      .filter(ncn => ncn.id === nodeId)
+      .shift();
   }
 
   findNodeData(nodesData, nodeId) {
@@ -258,10 +286,13 @@ class Topology extends React.Component {
     const { nodes, links, services } = this.state;
 
     const nodesData = services.map((service, index) => {
-
       const nodeRect = getNodeRect(service);
       const nodePosition = service.connected
-        ? this.getConstrainedNodePosition(service.id, nodeRect, service.children)
+        ? this.getConstrainedNodePosition(
+            service.id,
+            nodeRect,
+            service.children
+          )
         : this.getNotConnectedNodePosition(service.id);
 
       return {
@@ -279,7 +310,7 @@ class Topology extends React.Component {
         target: this.findNodeData(nodesData, link.target.id)
       }))
       .map((linkData, index) => {
-        return calculateLineLayout(linkData, index)
+        return calculateLineLayout(linkData, index);
       });
 
     const onDragStart = (evt, nodeId) => {
@@ -321,9 +352,12 @@ class Topology extends React.Component {
           };
         });
 
-        this.setState({
+        this.setState(
+          {
             nodes: dragNodes
-        }, () => this.forceUpdate());
+          },
+          () => this.forceUpdate()
+        );
 
         this.setDragInfo(true, this.dragInfo.nodeId, {
           x,
@@ -352,7 +386,8 @@ class Topology extends React.Component {
     const renderedLinkArrow = (l, index) =>
       <TopologyLinkArrow key={index} data={l} index={index} />;
 
-    const renderedNodes = this.dragInfo && this.dragInfo.dragging
+    const renderedNodes =
+      this.dragInfo && this.dragInfo.dragging
         ? nodesData
             .filter((n, index) => n.id !== this.dragInfo.nodeId)
             .map((n, index) => renderedNode(n, index))
@@ -360,13 +395,15 @@ class Topology extends React.Component {
 
     const renderedLinks = linksData.map((l, index) => renderedLink(l, index));
 
-    const renderedLinkArrows = this.dragInfo && this.dragInfo.dragging
+    const renderedLinkArrows =
+      this.dragInfo && this.dragInfo.dragging
         ? linksData
             .filter((l, index) => l.target.id !== this.dragInfo.nodeId)
             .map((l, index) => renderedLinkArrow(l, index))
         : linksData.map((l, index) => renderedLinkArrow(l, index));
 
-    const dragNode = !this.dragInfo || !this.dragInfo.dragging
+    const dragNode =
+      !this.dragInfo || !this.dragInfo.dragging
         ? null
         : renderedNode(
             nodesData.reduce((dragNode, n, index) => {
@@ -377,7 +414,8 @@ class Topology extends React.Component {
             }, {})
           );
 
-    const dragLinkArrow = !this.dragInfo ||
+    const dragLinkArrow =
+      !this.dragInfo ||
       !this.dragInfo.dragging ||
       renderedLinkArrows.length === renderedLinks.length
         ? null

packages/ui-toolkit/src/topology/node/button.js

@@ -27,8 +27,14 @@ const NodeButton = ({ onButtonClick, index, isConsul, instancesActive }) => {
 
   return (
     <g transform={`translate(${x}, ${y})`}>
-      <GraphLine x1={0} y1={0} x2={0} y2={height}
+      <GraphLine
-        consul={isConsul} active={instancesActive} />
+        x1={0}
+        y1={0}
+        x2={0}
+        y2={height}
+        consul={isConsul}
+        active={instancesActive}
+      />
       {buttonCircles}
       <GraphButtonRect
         height={height}

packages/ui-toolkit/src/topology/node/content.js

@@ -2,11 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Baseline from '../../baseline';
 import Constants from '../constants';
-import { GraphLine, GraphSubtitle, GraphText } from './shapes';
+import { GraphLine, GraphSubtitle } from './shapes';
 import GraphNodeInfo from './info';
 
-const GraphNodeContent = ({ child = false, data, y = Constants.contentRect.y, index = 0 }) => {
+const GraphNodeContent = ({
-  const { x, width, height } = Constants.contentRect;
+  child = false,
+  data,
+  y = Constants.contentRect.y,
+  index = 0
+}) => {
+  const { x, width } = Constants.contentRect;
 
   const nodeInfoPos = child
     ? {
@@ -25,16 +30,18 @@ const GraphNodeContent = ({ child = false, data, y = Constants.contentRect.y, in
       </GraphSubtitle>
     : null;
 
-  const nodeInfo =
+  const nodeInfo = <GraphNodeInfo data={data} pos={nodeInfoPos} />;
-    <GraphNodeInfo
-      data={data}
-      pos={nodeInfoPos}
-    />;
 
   return (
     <g transform={`translate(${x}, ${y})`}>
-      <GraphLine x1={0} y1={0} x2={width} y2={0}
+      <GraphLine
-        consul={data.isConsul} active={data.instancesActive} />
+        x1={0}
+        y1={0}
+        x2={width}
+        y2={0}
+        consul={data.isConsul}
+        active={data.instancesActive}
+      />
       {nodeSubtitle}
       {nodeInfo}
     </g>

packages/ui-toolkit/src/topology/node/index.js

@@ -61,30 +61,28 @@ const GraphNode = ({
     : {};
 
   const nodeContent = data.children
-    ? data.children.reduce((acc, d, i) => {
+    ? data.children.reduce(
+        (acc, d, i) => {
           acc.children.push(
-        <GraphNodeContent
+            <GraphNodeContent key={i} child data={d} index={i} y={acc.y} />
-          key={i}
-          child
-          data={d}
-          index={i}
-          y={acc.y}
-        />
           );
           acc.y += getContentRect(d, true).height;
           return acc;
-    }, {y: Constants.contentRect.y, children: []}).children
+        },
+        { y: Constants.contentRect.y, children: [] }
+      ).children
     : <GraphNodeContent data={data} />;
 
-  const nodeShadow = data.instancesActive ?
+  const nodeShadow = data.instancesActive
-    <GraphShadowRect
+    ? <GraphShadowRect
         x={0}
         y={3}
         width={width}
         height={height}
         consul={data.isConsul}
         active={data.instancesActive}
-    /> : null;
+      />
+    : null;
 
   return (
     <g transform={`translate(${x}, ${y})`}>
@@ -99,10 +97,7 @@ const GraphNode = ({
         connected={data.connected}
         {...nodeRectEvents}
       />
-      <GraphNodeTitle
+      <GraphNodeTitle data={data} onNodeTitleClick={onTitleClick} />
-        data={data}
-        onNodeTitleClick={onTitleClick}
-      />
       <GraphNodeButton
         index={index}
         onButtonClick={onButtonClick}

packages/ui-toolkit/src/topology/node/info.js

@@ -3,11 +3,9 @@ import styled from 'styled-components';
 import is, { isNot } from 'styled-is';
 import PropTypes from 'prop-types';
 import Baseline from '../../baseline';
-import DataCentresIcon from './icon-data-centers.svg';
 import InstancesIcon from './icon-instances.svg';
 import { Point } from '../prop-types';
-import { GraphText, GraphHealthyCircle } from './shapes';
+import { GraphText } from './shapes';
-import HeartIcon from './icon-heart.svg';
 import { HealthyIcon, UnhealthyIcon } from '../../icons';
 
 const StyledInstancesIcon = styled(InstancesIcon)`
@@ -22,22 +20,20 @@ const StyledInstancesIcon = styled(InstancesIcon)`
   `};
 `;
 
-const StyledDataCentresIcon = styled(DataCentresIcon)`
+// const StyledDataCentresIcon = styled(DataCentresIcon)`
-  fill: ${props => props.theme.white};
+//   fill: ${props => props.theme.white};
-
+//
-  ${is('consul')`
+//   ${is('consul')`
-    fill: ${props => props.theme.secondary};
+//     fill: ${props => props.theme.secondary};
-  `};
+//   `};
-
+//
-  ${isNot('active')`
+//   ${isNot('active')`
-    fill: ${props => props.theme.secondary};
+//     fill: ${props => props.theme.secondary};
-  `};
+//   `};
-`;
+// `;
 
 const GraphNodeInfo = ({ data, pos }) => {
-
   const {
-    datacenter,
     instances,
     instanceStatuses,
     instancesHealthy,
@@ -60,8 +56,7 @@ const GraphNodeInfo = ({ data, pos }) => {
         </GraphText>
       );
 
-  const healthy = instancesHealthy
+  const healthy = instancesHealthy ? <HealthyIcon /> : <UnhealthyIcon />;
-    ? <HealthyIcon /> : <UnhealthyIcon />;
 
   return (
     <g transform={`translate(${x}, ${y})`}>

packages/ui-toolkit/src/topology/node/title.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Baseline from '../../baseline';
 import Constants from '../constants';
-import { GraphTitle, GraphHealthyCircle } from './shapes';
+import { GraphTitle } from './shapes';
-import HeartIcon from './icon-heart.svg';
 
 const GraphNodeTitle = ({ data, onNodeTitleClick }) =>
   <g>

packages/ui-toolkit/src/topology/simulation.js

@@ -23,8 +23,9 @@ const createLinks = services =>
       service.connections
         ? acc.concat(
             service.connections.reduce((connections, connection, index) => {
-              const targetExists = services.filter(service =>
+              const targetExists = services.filter(
-                service.id === connection).length;
+                service => service.id === connection
+              ).length;
               if (targetExists) {
                 connections.push({
                   source: service.id,
@@ -42,10 +43,10 @@ const createSimulation = (services, svgSize, animationTicks = 0) => {
   // This is not going to work given that as well as the d3 layout stuff, other things might be at play too
   // We should pass two objects to the components - one for positioning and one for data
   const nodes = services.map((service, index) => {
-    return ({
+    return {
       id: service.id,
       index
-    })
+    };
   });
 
   const links = createLinks(services);

packages/ui-toolkit/styleguide.config.js

@@ -1,10 +1,10 @@
 const webpackConfig = require('react-scripts/config/webpack.config.dev.js');
 const { defaultHandlers } = require('react-docgen');
 const dnHandler = require('react-docgen-displayname-handler');
-// Const snapguidist = require('snapguidist');
+const snapguidist = require('snapguidist');
 const path = require('path');
 
-module.exports = {
+module.exports = snapguidist({
   webpackConfig: Object.assign(webpackConfig, {
     resolve: Object.assign(webpackConfig.resolve, {
       alias: Object.assign(webpackConfig.resolve.alias, {
@@ -83,4 +83,4 @@ module.exports = {
   ],
   handlers: componentPath =>
     defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
-};
+});

yarn.lock

@@ -141,10 +141,14 @@ add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
 
-ajv-keywords@^1.0.0, ajv-keywords@^1.1.1:
+ajv-keywords@^1.0.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
+ajv-keywords@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
+
 ajv@^4.7.0, ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -152,6 +156,15 @@ ajv@^4.7.0, ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.1.5:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    json-schema-traverse "^0.3.0"
+    json-stable-stringify "^1.0.1"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -587,6 +600,17 @@ autoprefixer@^6.0.0:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
+  dependencies:
+    browserslist "^2.1.5"
+    caniuse-lite "^1.0.30000697"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.6"
+    postcss-value-parser "^3.2.3"
+
 ava-init@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ava-init/-/ava-init-0.2.1.tgz#75ac4c8553326290d2866e63b62fa7035684bd58"
@@ -941,7 +965,7 @@ babel-plugin-istanbul@^4.1.4:
     istanbul-lib-instrument "^1.7.2"
     test-exclude "^4.1.1"
 
-babel-plugin-styled-components@^1.1.4:
+babel-plugin-styled-components@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.1.7.tgz#a92c239779cc80e7838b645c12865c61c4ca71ce"
   dependencies:
@@ -1656,7 +1680,7 @@ browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.1.2:
+browserslist@^2.1.2, browserslist@^2.1.5:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.2.2.tgz#e9b4618b8a01c193f9786beea09f6fd10dbe31c3"
   dependencies:
@@ -1826,7 +1850,7 @@ caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000706"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000706.tgz#e2b5f0460573cbcc88a0985f5cced08f1617c6f5"
 
-caniuse-lite@^1.0.30000704:
+caniuse-lite@^1.0.30000669, caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000704:
   version "1.0.30000706"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000706.tgz#bc59abc41ba7d4a3634dda95befded6114e1f24e"
 
@@ -2516,7 +2540,7 @@ cors@2.8.1:
   dependencies:
     vary "^1"
 
-cosmiconfig@^2.1.1:
+cosmiconfig@^2.1.1, cosmiconfig@^2.1.3:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
   dependencies:
@@ -2859,7 +2883,7 @@ d3-zoom@1.5.0:
     d3-selection "1"
     d3-transition "1"
 
-d3@^4.9.1:
+d3@^4.10.0:
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/d3/-/d3-4.10.0.tgz#0bcca3a3b614e2fd45b1b5bd0b9164d57352a862"
   dependencies:
@@ -3152,6 +3176,23 @@ doiuse@^2.4.1:
     through2 "^0.6.3"
     yargs "^3.5.4"
 
+doiuse@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doiuse/-/doiuse-3.0.0.tgz#e0d866ffd7c530fda5b9449af97096c4aac894f6"
+  dependencies:
+    browserslist "^2.1.2"
+    caniuse-lite "^1.0.30000669"
+    css-rule-stream "^1.1.0"
+    duplexer2 "0.0.2"
+    jsonfilter "^1.1.2"
+    ldjson-stream "^1.2.1"
+    lodash "^4.0.0"
+    multimatch "^2.0.0"
+    postcss "^6.0.1"
+    source-map "^0.5.6"
+    through2 "^0.6.3"
+    yargs "^8.0.1"
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -3282,7 +3323,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^3.3.0:
+enhanced-resolve@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
   dependencies:
@@ -3809,6 +3850,10 @@ falafel@^1.2.0:
     isarray "0.0.1"
     object-keys "^1.0.6"
 
+fast-deep-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+
 fast-diff@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.1.tgz#0aea0e4e605b6a2189f0e936d4b7fbaf1b7cfd9b"
@@ -5279,9 +5324,9 @@ jest-snapshot@^20.0.3:
     natural-compare "^1.4.0"
     pretty-format "^20.0.3"
 
-jest-styled-components@^3.0.2:
+jest-styled-components@^4.2.2:
-  version "3.3.2"
+  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-3.3.2.tgz#cf22c7489d417cbb19d878cdc606cec83538f4f7"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-4.2.2.tgz#8b4cc442e26a6ad8d8806360c4cea2117f8a62a7"
   dependencies:
     css "^2.2.1"
 
@@ -5431,6 +5476,10 @@ json-schema-ref-parser@^3.1.2:
     ono "^2.2.1"
     z-schema "^3.17.0"
 
+json-schema-traverse@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
+
 json-schema@0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.2.tgz#50354f19f603917c695f70b85afa77c3b0f23506"
@@ -5681,14 +5730,13 @@ loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@^0.2.16:
+loader-utils@^1.1.0:
-  version "0.2.17"
+  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
     big.js "^3.1.3"
     emojis-list "^2.0.0"
     json5 "^0.5.0"
-    object-assign "^4.0.1"
 
 locate-path@^2.0.0:
   version "2.0.0"
@@ -5908,6 +5956,10 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
+lodash.unescape@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -6012,7 +6064,7 @@ matcher@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.4"
 
-mathml-tag-names@^2.0.0:
+mathml-tag-names@^2.0.0, mathml-tag-names@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.0.1.tgz#8d41268168bf86d1102b98109e28e531e7a34578"
 
@@ -6904,6 +6956,10 @@ pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
 piloted@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/piloted/-/piloted-3.1.1.tgz#3eabeaac9bb02763e70da26caef634099b2a1fc9"
@@ -6990,7 +7046,7 @@ podium@1.x.x:
     items "2.x.x"
     joi "10.x.x"
 
-polished@^1.1.3:
+polished@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/polished/-/polished-1.3.0.tgz#ae0e26f0297297635fcd70a25a4a0f1947b3af54"
 
@@ -7004,6 +7060,12 @@ postcss-less@^0.14.0:
   dependencies:
     postcss "^5.0.21"
 
+postcss-less@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-1.1.0.tgz#bdcc76be64c4324d873fbc5cd9fa2e799e4305fa"
+  dependencies:
+    postcss "^5.2.16"
+
 postcss-media-query-parser@^0.2.0, postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -7026,6 +7088,14 @@ postcss-reporter@^3.0.0:
     log-symbols "^1.0.2"
     postcss "^5.0.0"
 
+postcss-reporter@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-4.0.0.tgz#13356c365c36783adde88e28e09dbba6ec6c6501"
+  dependencies:
+    chalk "^1.0.0"
+    lodash "^4.1.0"
+    log-symbols "^1.0.2"
+
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
@@ -7036,7 +7106,13 @@ postcss-scss@^0.4.0:
   dependencies:
     postcss "^5.2.13"
 
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.1.1:
+postcss-scss@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-1.0.2.tgz#ff45cf3354b879ee89a4eb68680f46ac9bb14f94"
+  dependencies:
+    postcss "^6.0.3"
+
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.1.1, postcss-selector-parser@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   dependencies:
@@ -7057,6 +7133,14 @@ postcss@^5.0.0, postcss@^5.0.18, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
+postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.3, postcss@^6.0.6:
+  version "6.0.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.8.tgz#89067a9ce8b11f8a84cbc5117efc30419a0857b3"
+  dependencies:
+    chalk "^2.0.1"
+    source-map "^0.5.6"
+    supports-color "^4.2.0"
+
 precond@0.2:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/precond/-/precond-0.2.3.tgz#aa9591bcaa24923f1e0f4849d240f47efc1075ac"
@@ -7073,11 +7157,7 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@1.4.4:
+prettier@1.5.3, prettier@^1.3.1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.4.4.tgz#a8d1447b14c9bf67e6d420dcadd10fb9a4fad65a"
-
-prettier@^1.3.1:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.5.3.tgz#59dadc683345ec6b88f88b94ed4ae7e1da394bfe"
 
@@ -7374,7 +7454,7 @@ react-docgen-displayname-handler@^1.0.0:
   dependencies:
     recast "0.11.12"
 
-react-docgen@^2.16.0:
+react-docgen@^2.17.0:
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.17.0.tgz#b0f3e85af955714e1067593c1043cb82611a93d1"
   dependencies:
@@ -7407,7 +7487,7 @@ react-redux@^5.0.5:
     loose-envify "^1.1.0"
     prop-types "^15.5.10"
 
-react-router-dom@^4.1.1:
+react-router-dom@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.2.tgz#7f8a7ca868d32acadd19ca09543b40d26df8ec37"
   dependencies:
@@ -7434,17 +7514,13 @@ react-simple-table@^1.0.1:
   dependencies:
     deep-get-set "^1.0.0"
 
-react-styled-flexboxgrid@^2.0.1:
+react-styled-flexboxgrid@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/react-styled-flexboxgrid/-/react-styled-flexboxgrid-2.0.3.tgz#308a8bbc80b1737a65f4ccf35d02afe20932a2f2"
   dependencies:
     lodash.isinteger "^4.0.4"
 
-react-test-renderer@15.4.1:
+react-test-renderer@15.6.1, react-test-renderer@^15.6.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.4.1.tgz#e38cd7057868d4a655d3764689735b4b97260706"
-
-react-test-renderer@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.1.tgz#026f4a5bb5552661fd2cc4bbcd0d4bc8a35ebf7e"
   dependencies:
@@ -7683,7 +7759,7 @@ redux-batched-actions@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/redux-batched-actions/-/redux-batched-actions-0.2.0.tgz#da0000c882b0e6c861a96d5823bd36adf5d9c0dd"
 
-redux-form@^7.0.0:
+redux-form@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.0.2.tgz#6fcc3e847ee95e1eca6af46da34c949458c6e950"
   dependencies:
@@ -7696,7 +7772,7 @@ redux-form@^7.0.0:
     lodash-es "^4.17.3"
     prop-types "^15.5.9"
 
-redux@^3.4.0, redux@^3.6.0:
+redux@^3.4.0, redux@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
   dependencies:
@@ -8203,6 +8279,10 @@ semver@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.1.0.tgz#85f2cf8550465c4df000cf7d86f6b054106ab9e5"
 
+semver@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
 send@0.15.3:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/send/-/send-0.15.3.tgz#5013f9f99023df50d1bd9892c19e3defd1d53309"
@@ -8349,16 +8429,16 @@ snake-case@^2.1.0:
   dependencies:
     no-case "^2.2.0"
 
-snapguidist@^1.1.2:
+snapguidist@^2.0.0:
-  version "1.1.2"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/snapguidist/-/snapguidist-1.1.2.tgz#1df461e0e8dd04fc1ceb727b4b1e58af6e3500b5"
+  resolved "https://registry.yarnpkg.com/snapguidist/-/snapguidist-2.0.0.tgz#430ddf17e0c04da47725210f6ee5d9ba7c4268d9"
   dependencies:
     body-parser "1.15.2"
     classnames "2.2.5"
     cors "2.8.1"
     jest-diff "18.1.0"
     jest-snapshot "18.1.0"
-    react-test-renderer "15.4.1"
+    react-test-renderer "15.6.1"
     strip-ansi "3.0.1"
     unfetch "2.1.2"
 
@@ -8452,7 +8532,7 @@ spdx-license-ids@^1.0.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
 
-specificity@^0.3.0:
+specificity@^0.3.0, specificity@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.3.1.tgz#f1b068424ce317ae07478d95de3c21cf85e8d567"
 
@@ -8714,7 +8794,7 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-styled-components@^2.1.0:
+styled-components@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.1.1.tgz#7e9b5bc319ee3963b47aebb74f4658119ea9d484"
   dependencies:
@@ -8754,23 +8834,50 @@ stylehacks@^2.3.2:
     text-table "^0.2.0"
     write-file-stdout "0.0.2"
 
-stylelint-config-primer@^1.4.0:
+stylelint-config-primer@^2.0.0:
-  version "1.4.0"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-primer/-/stylelint-config-primer-1.4.0.tgz#920addd90b408a622c52ece2fc004b4fbd7118fd"
+  resolved "https://registry.yarnpkg.com/stylelint-config-primer/-/stylelint-config-primer-2.0.0.tgz#9da8069f911f09bf8bdc1b425a3fa31d8486421f"
   dependencies:
+    stylelint-no-unsupported-browser-features "^1.0.0"
+    stylelint-order "^0.4.4"
     stylelint-scss "^1.4.1"
     stylelint-selector-no-utility "^1.5.0"
 
-stylelint-config-standard@^16.0.0:
+stylelint-config-recommended@^1.0.0:
-  version "16.0.0"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-16.0.0.tgz#bb7387bff1d7dd7186a52b3ebf885b2405d691bf"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-1.0.0.tgz#752c17fc68fa64cd5e7589e24f6e46e77e14a735"
 
-stylelint-processor-styled-components@styled-components/stylelint-processor-styled-components#68b4c4f:
+stylelint-config-standard@^17.0.0:
-  version "0.1.0"
+  version "17.0.0"
-  resolved "https://codeload.github.com/styled-components/stylelint-processor-styled-components/tar.gz/68b4c4f"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-17.0.0.tgz#42103a090054ee2a3dde9ecaed55e5d4d9d059fc"
+  dependencies:
+    stylelint-config-recommended "^1.0.0"
+
+stylelint-no-unsupported-browser-features@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-1.0.0.tgz#84a889c3499b3374416d500ce15f6cb17222d452"
+  dependencies:
+    doiuse "^3.0.0"
+    lodash "^4.17.4"
+    postcss "^6.0.1"
+    stylelint ">=5.0.0"
+
+stylelint-order@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-0.4.4.tgz#db7dfca0541b5062010c7e2e21e745791fc088ac"
+  dependencies:
+    lodash "^4.17.4"
+    postcss "^5.2.16"
+    stylelint "^7.9.0"
+
+stylelint-processor-styled-components@styled-components/stylelint-processor-styled-components#2a33b5f:
+  version "0.2.1"
+  resolved "https://codeload.github.com/styled-components/stylelint-processor-styled-components/tar.gz/2a33b5f"
   dependencies:
     babel-traverse "^6.16.0"
     babylon "^6.12.0"
+    typescript "~2.3.2"
+    typescript-eslint-parser "^4.0.0"
 
 stylelint-scss@^1.4.1:
   version "1.5.1"
@@ -8790,7 +8897,48 @@ stylelint-selector-no-utility@^1.5.0:
     primer-utilities "^4.3.5"
     stylelint "^7.0.0"
 
-stylelint@^7.0.0, stylelint@^7.0.3, stylelint@^7.11.1:
+stylelint@>=5.0.0, stylelint@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-8.0.0.tgz#87611211776cb315c93fcf6c58bc261d3c92612e"
+  dependencies:
+    autoprefixer "^7.1.2"
+    balanced-match "^1.0.0"
+    chalk "^2.0.1"
+    cosmiconfig "^2.1.3"
+    debug "^2.6.8"
+    execall "^1.0.0"
+    file-entry-cache "^2.0.0"
+    get-stdin "^5.0.1"
+    globby "^6.1.0"
+    globjoin "^0.1.4"
+    html-tags "^2.0.0"
+    ignore "^3.3.3"
+    imurmurhash "^0.1.4"
+    known-css-properties "^0.2.0"
+    lodash "^4.17.4"
+    log-symbols "^1.0.2"
+    mathml-tag-names "^2.0.1"
+    meow "^3.7.0"
+    micromatch "^2.3.11"
+    normalize-selector "^0.2.0"
+    pify "^3.0.0"
+    postcss "^6.0.6"
+    postcss-less "^1.1.0"
+    postcss-media-query-parser "^0.2.3"
+    postcss-reporter "^4.0.0"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-scss "^1.0.2"
+    postcss-selector-parser "^2.2.3"
+    postcss-value-parser "^3.3.0"
+    resolve-from "^3.0.0"
+    specificity "^0.3.1"
+    string-width "^2.1.0"
+    style-search "^0.1.0"
+    sugarss "^1.0.0"
+    svg-tags "^1.0.0"
+    table "^4.0.1"
+
+stylelint@^7.0.0, stylelint@^7.0.3, stylelint@^7.9.0:
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-7.13.0.tgz#111f97b6da72e775c80800d6bb6f5f869997785d"
   dependencies:
@@ -8854,6 +9002,12 @@ sugarss@^0.2.0:
   dependencies:
     postcss "^5.2.4"
 
+sugarss@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.0.tgz#65e51b3958432fb70d5451a68bb33e32d0cf1ef7"
+  dependencies:
+    postcss "^6.0.0"
+
 supports-color@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
@@ -8862,13 +9016,13 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
+supports-color@^3.1.2, supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^4.0.0, supports-color@^4.1.0:
+supports-color@^4.0.0, supports-color@^4.1.0, supports-color@^4.2.0, supports-color@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
   dependencies:
@@ -8984,7 +9138,7 @@ tap-xunit@^1.7.0:
     xmlbuilder "~4.1.0"
     xtend "~4.0.0"
 
-tapable@^0.2.7, tapable@~0.2.5:
+tapable@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.7.tgz#e46c0daacbb2b8a98b9b0cea0f4052105817ed5c"
 
@@ -9343,11 +9497,22 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript-eslint-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-4.0.0.tgz#263d836484c51d4577a3c11aa520f64191a6e58f"
+  dependencies:
+    lodash.unescape "4.0.1"
+    semver "5.3.0"
+
+typescript@~2.3.2:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.4.tgz#3d38321828231e434f287514959c37a82b629f42"
+
 ua-parser-js@^0.7.9:
   version "0.7.14"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
-uglify-js@^2.6, uglify-js@^2.8.27:
+uglify-js@^2.6, uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
   dependencies:
@@ -9360,6 +9525,14 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+uglifyjs-webpack-plugin@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+  dependencies:
+    source-map "^0.5.6"
+    uglify-js "^2.8.29"
+    webpack-sources "^1.0.1"
+
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -9679,7 +9852,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^1.3.1:
+watchpack@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
   dependencies:
@@ -9704,31 +9877,32 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.5.3"
 
-webpack@^2.6.1:
+webpack@^3.4.1:
-  version "2.7.0"
+  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.7.0.tgz#b2a1226804373ffd3d03ea9c6bd525067034f6b1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.4.1.tgz#4c3f4f3fb318155a4db0cb6a36ff05c5697418f4"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
-    ajv "^4.7.0"
+    ajv "^5.1.5"
-    ajv-keywords "^1.1.1"
+    ajv-keywords "^2.0.0"
     async "^2.1.2"
-    enhanced-resolve "^3.3.0"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
     interpret "^1.0.0"
     json-loader "^0.5.4"
     json5 "^0.5.1"
     loader-runner "^2.3.0"
-    loader-utils "^0.2.16"
+    loader-utils "^1.1.0"
     memory-fs "~0.4.1"
     mkdirp "~0.5.0"
     node-libs-browser "^2.0.0"
     source-map "^0.5.3"
-    supports-color "^3.1.0"
+    supports-color "^4.2.1"
-    tapable "~0.2.5"
+    tapable "^0.2.7"
-    uglify-js "^2.8.27"
+    uglifyjs-webpack-plugin "^0.4.6"
-    watchpack "^1.3.1"
+    watchpack "^1.4.0"
     webpack-sources "^1.0.1"
-    yargs "^6.0.0"
+    yargs "^8.0.2"
 
 well-known-symbols@^1.0.0:
   version "1.0.0"
@@ -9742,10 +9916,6 @@ whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
 
-which-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -9923,12 +10093,6 @@ yamljs@^0.2.10:
     argparse "^1.0.7"
     glob "^7.0.5"
 
-yargs-parser@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
-  dependencies:
-    camelcase "^3.0.0"
-
 yargs-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
@@ -9957,24 +10121,6 @@ yargs@^3.5.4:
     window-size "^0.1.4"
     y18n "^3.2.0"
 
-yargs@^6.0.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
-  dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^4.2.0"
-
 yargs@^8.0.1, yargs@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"