From 718bab3c7833892ce56e72eba1515ad16da8b692 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Mon, 25 Sep 2017 14:47:00 +0100
Subject: [PATCH] feat(my-joyent): ssd/magnetic form

---
 packages/my-joyent/package.json               |    1 +
 .../__snapshots__/index.spec.js.snap          |  264 ++++
 .../diskTypeForm/__tests__/index.spec.js      |   23 +
 .../src/components/diskTypeForm/index.js      |   38 +
 .../__snapshots__/filters.spec.js.snap        |  550 ++++++--
 .../filters/__tests__/filters.spec.js         |   10 +-
 .../src/components/filters/filters.js         |   38 +-
 .../my-joyent/src/components/home/home.js     |   12 +
 .../__snapshots__/index.spec.js.snap          |    2 +-
 .../my-joyent/src/components/package/index.js |    5 +-
 .../__tests__/__snapshots__/list.spec.js.snap |   12 +-
 .../__snapshots__/index.spec.js.snap          | 1210 ++++++++++-------
 .../__snapshots__/index.spec.js.snap          |   10 +-
 packages/my-joyent/src/data/packages.json     |   18 +
 packages/my-joyent/src/state/filterReducer.js |   14 +-
 packages/my-joyent/src/state/state.js         |    4 +
 packages/ui-toolkit/src/form/base/toggle.js   |   55 +-
 packages/ui-toolkit/src/form/checkbox.js      |   20 +
 packages/ui-toolkit/src/form/index.js         |    2 +-
 packages/ui-toolkit/src/index.js              |    1 +
 .../input-range/input-range.jsx               |    2 +-
 yarn.lock                                     |    4 +
 22 files changed, 1601 insertions(+), 694 deletions(-)
 create mode 100644 packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap
 create mode 100644 packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js
 create mode 100644 packages/my-joyent/src/components/diskTypeForm/index.js

diff --git a/packages/my-joyent/package.json b/packages/my-joyent/package.json
index dedf4da2..32e0d16c 100644
--- a/packages/my-joyent/package.json
+++ b/packages/my-joyent/package.json
@@ -20,6 +20,7 @@
     "graphql-tag": "^2.4.2",
     "jest-cli": "^21.0.1",
     "joyent-ui-toolkit": "^2.0.0",
+    "lodash.isempty": "^4.4.0",
     "normalized-styled-components": "^1.0.9",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
diff --git a/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000..da210bf7
--- /dev/null
+++ b/packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,264 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders <DiskTypeForm /> without throwing 1`] = `
+.c7 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
+}
+
+.c7[type='checkbox'],
+.c7[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c7[type='number']::-webkit-inner-spin-button,
+.c7[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c7[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c7[type='search']::-webkit-search-cancel-button,
+.c7[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c7::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c7:checked + label::after {
+  opacity: 1;
+}
+
+.c7:selected + label::after {
+  opacity: 1;
+}
+
+.c7:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c7:disabled + label::after {
+  opacity: 0.3;
+}
+
+.c8 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0;
+  box-sizing: border-box;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 1px solid;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c8::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c6 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 0.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+}
+
+.c5 {
+  list-style-type: none;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c3 {
+  margin: 0;
+  padding: 0;
+}
+
+.c4 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c1 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+}
+
+.c0 {
+  margin-top: 0.75rem;
+  min-width: 12.5rem;
+}
+
+.c0 label {
+  font-size: 0.8125rem;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-top: 0.375rem;
+}
+
+<form
+  onChange={[Function]}
+>
+  <section
+    className="c0"
+  >
+    <legend
+      className="c1"
+    >
+      Disk
+    </legend>
+    <ul
+      className="c2 c3"
+    >
+      <fieldset
+        className="c4"
+        style={undefined}
+      >
+        <div>
+          <li
+            checked={false}
+            className="c5"
+            name="magnetic"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            value=""
+          >
+            <div
+              className="c6"
+              type="checkbox"
+            >
+              <input
+                checked={false}
+                className="c7"
+                id="bZXIZF"
+                name="magnetic"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                type="checkbox"
+                value=""
+              />
+              <label
+                className="c8"
+                htmlFor="bZXIZF"
+              />
+            </div>
+            Magnetic
+          </li>
+        </div>
+      </fieldset>
+      <fieldset
+        className="c4"
+        style={undefined}
+      >
+        <div>
+          <li
+            checked={false}
+            className="c5"
+            name="ssd"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onDragStart={[Function]}
+            onDrop={[Function]}
+            onFocus={[Function]}
+            value=""
+          >
+            <div
+              className="c6"
+              type="checkbox"
+            >
+              <input
+                checked={false}
+                className="c7"
+                id="cvStXY"
+                name="ssd"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                type="checkbox"
+                value=""
+              />
+              <label
+                className="c8"
+                htmlFor="cvStXY"
+              />
+            </div>
+            SSD
+          </li>
+        </div>
+      </fieldset>
+    </ul>
+  </section>
+</form>
+`;
diff --git a/packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js b/packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js
new file mode 100644
index 00000000..16cfbdbe
--- /dev/null
+++ b/packages/my-joyent/src/components/diskTypeForm/__tests__/index.spec.js
@@ -0,0 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router, Store } from '@mocks/';
+import { default as DiskTypeForm } from '../';
+
+it('renders <DiskTypeForm /> without throwing', () => {
+  const tree = renderer
+    .create(
+      <Store>
+        <Router>
+          <DiskTypeForm />
+        </Router>
+      </Store>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/my-joyent/src/components/diskTypeForm/index.js b/packages/my-joyent/src/components/diskTypeForm/index.js
new file mode 100644
index 00000000..b5c16ced
--- /dev/null
+++ b/packages/my-joyent/src/components/diskTypeForm/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { reduxForm } from 'redux-form';
+import remcalc from 'remcalc';
+import { FormGroup, Checkbox, Legend, CheckboxList } from 'joyent-ui-toolkit';
+
+const Radios = styled.section`
+  margin-top: ${remcalc(12)};
+  min-width: ${remcalc(200)};
+
+  label {
+    font-size: ${remcalc(13)};
+  }
+`;
+
+const CheckboxListStyled = styled(CheckboxList)`
+  display: flex;
+  align-items: center;
+  margin-top: ${remcalc(6)};
+`;
+
+const DiskTypeForm = ({ onChange, handleSubmit }) => (
+  <form onChange={() => handleSubmit(params => onChange(params))}>
+    <Radios>
+      <Legend>Disk</Legend>
+      <CheckboxListStyled>
+        <FormGroup name="magnetic" type="checkbox" reduxForm>
+          <Checkbox>Magnetic</Checkbox>
+        </FormGroup>
+        <FormGroup name="ssd" type="checkbox" reduxForm>
+          <Checkbox>SSD</Checkbox>
+        </FormGroup>
+      </CheckboxListStyled>
+    </Radios>
+  </form>
+);
+
+export default reduxForm({ form: 'magnetic' })(DiskTypeForm);
diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
index ae0f7da1..6a5cb1ce 100644
--- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders <Filters /> without throwing 1`] = `
-.c6 {
+.c5 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -49,6 +49,93 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-weight: 600;
 }
 
+.c5::-moz-focus-inner,
+.c5[type='button']::-moz-focus-inner,
+.c5[type='reset']::-moz-focus-inner,
+.c5[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c5:-moz-focusring,
+.c5[type='button']:-moz-focusring,
+.c5[type='reset']:-moz-focusring,
+.c5[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c5:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c5:hover {
+  border: solid 0.0625rem;
+}
+
+.c5:active,
+.c5:active:hover,
+.c5:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c5[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c5 + button {
+  margin-left: 1.25rem;
+}
+
+.c6 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
 .c6::-moz-focus-inner,
 .c6[type='button']::-moz-focus-inner,
 .c6[type='reset']::-moz-focus-inner,
@@ -89,93 +176,6 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-left: 1.25rem;
 }
 
-.c7 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-  padding: 0.5625rem 1.125rem;
-  font-weight: 600;
-}
-
-.c7::-moz-focus-inner,
-.c7[type='button']::-moz-focus-inner,
-.c7[type='reset']::-moz-focus-inner,
-.c7[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c7:-moz-focusring,
-.c7[type='button']:-moz-focusring,
-.c7[type='reset']:-moz-focusring,
-.c7[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c7:focus {
-  outline: 0;
-  text-decoration: none;
-}
-
-.c7:hover {
-  border: solid 0.0625rem;
-}
-
-.c7:active,
-.c7:active:hover,
-.c7:active:focus {
-  background-image: none;
-  outline: 0;
-}
-
-.c7[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c7 + button {
-  margin-left: 1.25rem;
-}
-
 .c2 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
@@ -185,17 +185,134 @@ exports[`renders <Filters /> without throwing 1`] = `
   display: block;
 }
 
-.c4 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  margin-bottom: 0.375rem;
+.c23 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
 }
 
-.c10 {
+.c23[type='checkbox'],
+.c23[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c23[type='number']::-webkit-inner-spin-button,
+.c23[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c23[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c23[type='search']::-webkit-search-cancel-button,
+.c23[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c23::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c23:checked + label::after {
+  opacity: 1;
+}
+
+.c23:selected + label::after {
+  opacity: 1;
+}
+
+.c23:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c23:disabled + label::after {
+  opacity: 0.3;
+}
+
+.c24 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0;
+  box-sizing: border-box;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 1px solid;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c24::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c22 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 0.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+}
+
+.c21 {
+  list-style-type: none;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c19 {
+  margin: 0;
+  padding: 0;
+}
+
+.c20 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c9 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
@@ -206,7 +323,18 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-weight: bold;
 }
 
-.c14 {
+.c17 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+}
+
+.c13 {
   font-size: 0.8125rem;
   position: absolute;
   top: 0.875rem;
@@ -214,7 +342,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   color: #464646;
 }
 
-.c16 {
+.c15 {
   font-size: 0.8125rem;
   position: absolute;
   top: 0.875rem;
@@ -222,7 +350,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   color: #464646;
 }
 
-.c15 {
+.c14 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -242,17 +370,17 @@ exports[`renders <Filters /> without throwing 1`] = `
   margin-top: 0.125rem;
 }
 
-.c15::active {
+.c14::active {
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.3);
 }
 
-.c15::focus {
+.c14::focus {
   box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
 }
 
-.c12 {
+.c11 {
   background: #D8D8D8;
   cursor: pointer;
   display: block;
@@ -260,40 +388,61 @@ exports[`renders <Filters /> without throwing 1`] = `
   position: relative;
 }
 
-.c13 {
+.c12 {
   background: #364ACD;
   height: 100%;
   position: absolute;
 }
 
-.c11 {
+.c10 {
   position: relative;
   min-height: 0.625rem;
 }
 
-.c9 {
+.c8 {
   margin-bottom: 0.625rem;
   margin-top: 0.75rem;
 }
 
-.c8 {
+.c16 {
+  margin-top: 0.75rem;
+  min-width: 12.5rem;
+}
+
+.c16 label {
+  font-size: 0.8125rem;
+}
+
+.c18 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-top: 0.375rem;
+}
+
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c8 > div {
+.c7 > div {
   -webkit-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
 }
 
-.c8 > div:not(:last-child) {
+.c7 > div:not(:last-child) {
   margin-right: 2.25rem;
 }
 
-.c5 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -329,37 +478,37 @@ exports[`renders <Filters /> without throwing 1`] = `
     Choose package
   </label>
   <label
-    className="c3 c4"
+    className="c3 c2"
   >
     Filter by package type
   </label>
   <section
-    className="c5"
+    className="c4"
   >
     <div>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
         Compute Optimized
       </button>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
         General Purpose
       </button>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
         Memory Optimized
       </button>
       <button
-        className="c6"
+        className="c5"
         onClick={[Function]}
         selected={false}
       >
@@ -367,7 +516,7 @@ exports[`renders <Filters /> without throwing 1`] = `
       </button>
     </div>
     <button
-      className="c7"
+      className="c6"
       disabled={false}
       onClick={[Function]}
     >
@@ -380,30 +529,30 @@ exports[`renders <Filters /> without throwing 1`] = `
     Filter by package feature
   </label>
   <section
-    className="c8"
+    className="c7"
   >
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         GB RAM
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -413,7 +562,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.256
@@ -424,7 +573,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={50.688}
               aria-valuemin={0.256}
               aria-valuenow={0.256}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -442,7 +591,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               50.688
@@ -453,7 +602,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={50.688}
               aria-valuemin={0.256}
               aria-valuenow={50.688}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -474,26 +623,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         vCPUs
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -503,7 +652,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.25
@@ -514,7 +663,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={3.25}
               aria-valuemin={0.25}
               aria-valuenow={0.25}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -532,7 +681,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               3.25
@@ -543,7 +692,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={3.25}
               aria-valuemin={0.25}
               aria-valuenow={3.25}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -564,26 +713,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         TB Disk
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -593,7 +742,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.01
@@ -604,7 +753,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={107.26}
               aria-valuemin={0.01}
               aria-valuenow={0.01}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -622,7 +771,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               107.26
@@ -633,7 +782,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={107.26}
               aria-valuemin={0.01}
               aria-valuenow={107.26}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -654,26 +803,26 @@ exports[`renders <Filters /> without throwing 1`] = `
     </div>
     <div>
       <label
-        className="c9 c10"
+        className="c8 c9"
         htmlFor=""
       >
         $/hr
       </label>
       <div
         aria-disabled={false}
-        className="c11"
+        className="c10"
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
         onTouchStart={[Function]}
       >
         <div
-          className="c12"
+          className="c11"
           onMouseDown={[Function]}
           onTouchStart={[Function]}
         >
           <div
-            className="c13"
+            className="c12"
             style={
               Object {
                 "left": "0%",
@@ -683,7 +832,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           />
           <span>
             <span
-              className="c14"
+              className="c13"
               type="min"
             >
               0.016
@@ -694,7 +843,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={0.525}
               aria-valuemin={0.016}
               aria-valuenow={0.016}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -712,7 +861,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           </span>
           <span>
             <span
-              className="c16"
+              className="c15"
               type="max"
             >
               0.525
@@ -723,7 +872,7 @@ exports[`renders <Filters /> without throwing 1`] = `
               aria-valuemax={0.525}
               aria-valuemin={0.016}
               aria-valuenow={0.525}
-              className="c15"
+              className="c14"
               draggable="false"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
@@ -742,6 +891,107 @@ exports[`renders <Filters /> without throwing 1`] = `
         </div>
       </div>
     </div>
+    <form
+      onChange={[Function]}
+    >
+      <section
+        className="c16"
+      >
+        <legend
+          className="c17"
+        >
+          Disk
+        </legend>
+        <ul
+          className="c18 c19"
+        >
+          <fieldset
+            className="c20"
+            style={undefined}
+          >
+            <div>
+              <li
+                checked={false}
+                className="c21"
+                name="magnetic"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                value=""
+              >
+                <div
+                  className="c22"
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c23"
+                    id="sIMIU"
+                    name="magnetic"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onDragStart={[Function]}
+                    onDrop={[Function]}
+                    onFocus={[Function]}
+                    type="checkbox"
+                    value=""
+                  />
+                  <label
+                    className="c24"
+                    htmlFor="sIMIU"
+                  />
+                </div>
+                Magnetic
+              </li>
+            </div>
+          </fieldset>
+          <fieldset
+            className="c20"
+            style={undefined}
+          >
+            <div>
+              <li
+                checked={false}
+                className="c21"
+                name="ssd"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onDragStart={[Function]}
+                onDrop={[Function]}
+                onFocus={[Function]}
+                value=""
+              >
+                <div
+                  className="c22"
+                  type="checkbox"
+                >
+                  <input
+                    checked={false}
+                    className="c23"
+                    id="bCkzvd"
+                    name="ssd"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onDragStart={[Function]}
+                    onDrop={[Function]}
+                    onFocus={[Function]}
+                    type="checkbox"
+                    value=""
+                  />
+                  <label
+                    className="c24"
+                    htmlFor="bCkzvd"
+                  />
+                </div>
+                SSD
+              </li>
+            </div>
+          </fieldset>
+        </ul>
+      </section>
+    </form>
   </section>
 </section>
 `;
diff --git a/packages/my-joyent/src/components/filters/__tests__/filters.spec.js b/packages/my-joyent/src/components/filters/__tests__/filters.spec.js
index 35335e15..73a327f8 100644
--- a/packages/my-joyent/src/components/filters/__tests__/filters.spec.js
+++ b/packages/my-joyent/src/components/filters/__tests__/filters.spec.js
@@ -6,15 +6,17 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
-import { Router, FiltersMock, PackagesMock } from '@mocks/';
+import { Router, FiltersMock, PackagesMock, Store } from '@mocks/';
 import Filters from '../filters';
 
 it('renders <Filters /> without throwing', () => {
   const tree = renderer
     .create(
-      <Router>
-        <Filters filters={FiltersMock} packages={PackagesMock} />
-      </Router>
+      <Store>
+        <Router>
+          <Filters filters={FiltersMock} packages={PackagesMock} />
+        </Router>
+      </Store>
     )
     .toJSON();
   expect(tree).toMatchSnapshot();
diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js
index 0ceb433a..0e81b14b 100644
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@@ -2,8 +2,13 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import isEqual from 'lodash.isequal';
-import { Label, Button, Slider } from 'joyent-ui-toolkit';
+import {
+  Button,
+  Label,
+  Slider
+} from 'joyent-ui-toolkit';
 import { default as defaultState } from '@state/state';
+import { default as DiskTypeFrom } from '@components/diskTypeForm';
 
 const FilterWrapper = styled.section`
   display: flex;
@@ -74,13 +79,13 @@ class Filters extends Component {
 
   componentWillReceiveProps(nextProps) {
     const { packages } = nextProps;
-    packages.length > 1 && 
-    this.setState({
-      ram: getFirstAndLast(packages, 'memory'),
-      cpu: getFirstAndLast(packages, 'vcpus'),
-      disk: getFirstAndLast(packages, 'disk'),
-      cost: getFirstAndLast(packages, 'price')
-    });
+    packages.length > 1 &&
+      this.setState({
+        ram: getFirstAndLast(packages, 'memory'),
+        cpu: getFirstAndLast(packages, 'vcpus'),
+        disk: getFirstAndLast(packages, 'disk'),
+        cost: getFirstAndLast(packages, 'price')
+      });
   }
 
   groupChange(group) {
@@ -103,7 +108,8 @@ class Filters extends Component {
     return (
       (nextState.groupClick !== groupClick &&
         isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
-      nextState.reset !== reset
+      nextState.reset !== reset ||
+      !isEqual(nextProps.filters.diskType, filters.diskType)
     );
   }
 
@@ -128,14 +134,16 @@ class Filters extends Component {
       cpuSliderChange,
       diskSliderChange,
       costSliderChange,
-      packages
+      packages,
+      diskTypeChange
     } = this.props;
 
     const { reset, cpu, cost, ram, disk, defaults } = this.state;
+
     return (
       <Wrapper>
         <Title>Choose package</Title>
-        <Subtitle marginBottom="1">Filter by package type</Subtitle>
+        <Subtitle>Filter by package type</Subtitle>
         <GroupWrapper>
           <div>
             {filters.groups
@@ -200,13 +208,17 @@ class Filters extends Component {
             greyed={packages.length === 0}
             minValue={defaults.cost.min}
             maxValue={defaults.cost.max}
-            step={0.02}
+            step={0.016}
             value={cost}
-            key={`${cost.min}-${ram.max}`}
+            key={`${cost.min}-${cost.max}`}
             onChangeComplete={value => costSliderChange(value)}
           >
             $/hr
           </Slider>
+          <DiskTypeFrom
+            onChange={params => diskTypeChange(params)}
+            onSubmit={e => {}}
+          />
         </FilterWrapper>
       </Wrapper>
     );
diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js
index a40fd155..2f3c0042 100644
--- a/packages/my-joyent/src/components/home/home.js
+++ b/packages/my-joyent/src/components/home/home.js
@@ -28,6 +28,7 @@ class Home extends Component {
     this.closeMessage = this.closeMessage.bind(this);
     this.changeValue = this.changeValue.bind(this);
     this.changeGroup = this.changeGroup.bind(this);
+    this.diskTypeChange = this.diskTypeChange.bind(this);
   }
 
   closeMessage() {
@@ -38,6 +39,7 @@ class Home extends Component {
 
   changeValue(key, value) {
     const { filters, onFilterChange } = this.props;
+
     onFilterChange({
       ...filters,
       [key]: value
@@ -54,6 +56,15 @@ class Home extends Component {
     });
   }
 
+  diskTypeChange(value) {
+    const { filters, onFilterChange } = this.props;
+
+    onFilterChange({
+      ...filters,
+      diskType: { ...value }
+    });
+  }
+
   render() {
     const { showMessage } = this.state;
     const { filters, onFilterReset, packages } = this.props;
@@ -86,6 +97,7 @@ class Home extends Component {
             cpuSliderChange={value => this.changeValue('cpu', value)}
             diskSliderChange={value => this.changeValue('disk', value)}
             costSliderChange={value => this.changeValue('cost', value)}
+            diskTypeChange={this.diskTypeChange}
           />
         </Row>
         <Row>
diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
index 674ea770..ba8ea483 100644
--- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
@@ -265,7 +265,7 @@ exports[`renders <Package /> without throwing 1`] = `
           <span
             className="c7"
           >
-            SSD
+            Magnetic
           </span>
         </div>
         <div
diff --git a/packages/my-joyent/src/components/package/index.js b/packages/my-joyent/src/components/package/index.js
index 4451a03d..1ee11305 100644
--- a/packages/my-joyent/src/components/package/index.js
+++ b/packages/my-joyent/src/components/package/index.js
@@ -17,7 +17,7 @@ const PackageStyled = styled(Card)`
 `;
 
 const Package = ({
-      pack: { price, memory, vcpus, disk, group },
+      pack: { price, memory, vcpus, disk, group, ssd },
       selected,
       onClick
     }) => (
@@ -30,8 +30,7 @@ const Package = ({
             <CardSubTitle selected={selected}>
               {disk} TB disk
             </CardSubTitle>
-            <CardSubTitle selected={selected}>SSD</CardSubTitle>
-
+            <CardSubTitle selected={selected}>{ssd ? 'SSD' : 'Magnetic'}</CardSubTitle>
             <CardFooter selected={selected}>{group}</CardFooter>
           </CardMeta>
         </CardView>
diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
index 4a6dc0d4..75489903 100644
--- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
@@ -336,7 +336,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -428,7 +428,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -520,7 +520,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -612,7 +612,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -704,7 +704,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -796,7 +796,7 @@ exports[`renders <Packages /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
diff --git a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
index 6dabc64e..29c04574 100644
--- a/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/home/__tests__/__snapshots__/index.spec.js.snap
@@ -20,7 +20,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-left: -0.5rem;
 }
 
-.c37 {
+.c45 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -29,7 +29,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   padding-left: 0.5rem;
 }
 
-.c41 {
+.c49 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -141,7 +141,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-left: 1.25rem;
 }
 
-.c25 {
+.c24 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -189,6 +189,93 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   font-weight: 600;
 }
 
+.c24::-moz-focus-inner,
+.c24[type='button']::-moz-focus-inner,
+.c24[type='reset']::-moz-focus-inner,
+.c24[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c24:-moz-focusring,
+.c24[type='button']:-moz-focusring,
+.c24[type='reset']:-moz-focusring,
+.c24[type='submit']:-moz-focusring {
+  outline: 0.0625rem dotted ButtonText;
+}
+
+.c24:focus {
+  outline: 0;
+  text-decoration: none;
+}
+
+.c24:hover {
+  border: solid 0.0625rem;
+}
+
+.c24:active,
+.c24:active:hover,
+.c24:active:focus {
+  background-image: none;
+  outline: 0;
+}
+
+.c24[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c24 + button {
+  margin-left: 1.25rem;
+}
+
+.c25 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  min-width: 7.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0;
+  padding: 0.9375rem 1.125rem;
+  position: relative;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+  font-size: 0.9375rem;
+  text-align: center;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border-radius: 0.25rem;
+  border: solid 0.0625rem;
+  padding: 0.5625rem 1.125rem;
+  font-weight: 600;
+}
+
 .c25::-moz-focus-inner,
 .c25[type='button']::-moz-focus-inner,
 .c25[type='reset']::-moz-focus-inner,
@@ -229,94 +316,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-left: 1.25rem;
 }
 
-.c26 {
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
-  min-width: 7.5rem;
-  box-sizing: border-box;
-  display: inline-block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin: 0;
-  padding: 0.9375rem 1.125rem;
-  position: relative;
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  text-align: center;
-  font-style: normal;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border-radius: 0.25rem;
-  border: solid 0.0625rem;
-  padding: 0.5625rem 1.125rem;
-  font-weight: 600;
-}
-
-.c26::-moz-focus-inner,
-.c26[type='button']::-moz-focus-inner,
-.c26[type='reset']::-moz-focus-inner,
-.c26[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-.c26:-moz-focusring,
-.c26[type='button']:-moz-focusring,
-.c26[type='reset']:-moz-focusring,
-.c26[type='submit']:-moz-focusring {
-  outline: 0.0625rem dotted ButtonText;
-}
-
-.c26:focus {
-  outline: 0;
-  text-decoration: none;
-}
-
-.c26:hover {
-  border: solid 0.0625rem;
-}
-
-.c26:active,
-.c26:active:hover,
-.c26:active:focus {
-  background-image: none;
-  outline: 0;
-}
-
-.c26[disabled] {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.c26 + button {
-  margin-left: 1.25rem;
-}
-
-.c48 {
+.c56 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -361,43 +361,43 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   border: solid 0.0625rem;
 }
 
-.c48::-moz-focus-inner,
-.c48[type='button']::-moz-focus-inner,
-.c48[type='reset']::-moz-focus-inner,
-.c48[type='submit']::-moz-focus-inner {
+.c56::-moz-focus-inner,
+.c56[type='button']::-moz-focus-inner,
+.c56[type='reset']::-moz-focus-inner,
+.c56[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c48:-moz-focusring,
-.c48[type='button']:-moz-focusring,
-.c48[type='reset']:-moz-focusring,
-.c48[type='submit']:-moz-focusring {
+.c56:-moz-focusring,
+.c56[type='button']:-moz-focusring,
+.c56[type='reset']:-moz-focusring,
+.c56[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c48:focus {
+.c56:focus {
   outline: 0;
   text-decoration: none;
 }
 
-.c48:hover {
+.c56:hover {
   border: solid 0.0625rem;
 }
 
-.c48:active,
-.c48:active:hover,
-.c48:active:focus {
+.c56:active,
+.c56:active:hover,
+.c56:active:focus {
   background-image: none;
   outline: 0;
 }
 
-.c48[disabled] {
+.c56[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c48 + button {
+.c56 + button {
   margin-left: 1.25rem;
 }
 
@@ -436,16 +436,6 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   display: block;
 }
 
-.c23 {
-  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
-  font-weight: 400;
-  font-size: 0.9375rem;
-  font-style: normal;
-  font-stretch: normal;
-  display: block;
-  margin-bottom: 0.375rem;
-}
-
 .c14 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
@@ -471,7 +461,134 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   box-shadow: none;
 }
 
-.c29 {
+.c42 {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+  overflow: visible;
+  display: none;
+}
+
+.c42[type='checkbox'],
+.c42[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.c42[type='number']::-webkit-inner-spin-button,
+.c42[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.c42[type='search'] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -0.125rem;
+}
+
+.c42[type='search']::-webkit-search-cancel-button,
+.c42[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c42::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+  font: inherit;
+}
+
+.c42:checked + label::after {
+  opacity: 1;
+}
+
+.c42:selected + label::after {
+  opacity: 1;
+}
+
+.c42:disabled + label {
+  background-color: rgb(249,249,249);
+}
+
+.c42:disabled + label::after {
+  opacity: 0.3;
+}
+
+.c43 {
+  color: rgb(100,100,100);
+  position: absolute;
+  width: 1.125rem;
+  height: 1.125rem;
+  top: 0;
+  box-sizing: border-box;
+  background-color: rgb(255,255,255);
+  box-shadow: none;
+  border: 1px solid;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.c43::after {
+  opacity: 0;
+  content: '';
+  position: absolute;
+  width: 0.375rem;
+  height: 0.125rem;
+  background: transparent;
+  top: 0.3125rem;
+  left: 0.25rem;
+  border: 0.125rem solid;
+  border-top: none;
+  border-right: none;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.c41 {
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 0.5rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  position: relative;
+}
+
+.c40 {
+  list-style-type: none;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 400;
+}
+
+.c38 {
+  margin: 0;
+  padding: 0;
+}
+
+.c39 {
+  padding: 0.35em 0.75em 0.625em;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+}
+
+.c28 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   font-size: 0.9375rem;
@@ -482,6 +599,17 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   font-weight: bold;
 }
 
+.c36 {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+  font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+  font-weight: 600;
+}
+
 .c8 {
   position: relative;
   margin-bottom: 0.75rem;
@@ -517,7 +645,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   top: 0.1875rem;
 }
 
-.c33 {
+.c32 {
   font-size: 0.8125rem;
   position: absolute;
   top: 0.875rem;
@@ -525,7 +653,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   color: #464646;
 }
 
-.c35 {
+.c34 {
   font-size: 0.8125rem;
   position: absolute;
   top: 0.875rem;
@@ -533,7 +661,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   color: #464646;
 }
 
-.c34 {
+.c33 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -553,17 +681,17 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-top: 0.125rem;
 }
 
-.c34::active {
+.c33::active {
   -webkit-transform: scale(1.3);
   -ms-transform: scale(1.3);
   transform: scale(1.3);
 }
 
-.c34::focus {
+.c33::focus {
   box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
 }
 
-.c31 {
+.c30 {
   background: #D8D8D8;
   cursor: pointer;
   display: block;
@@ -571,23 +699,23 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   position: relative;
 }
 
-.c32 {
+.c31 {
   background: #364ACD;
   height: 100%;
   position: absolute;
 }
 
-.c30 {
+.c29 {
   position: relative;
   min-height: 0.625rem;
 }
 
-.c28 {
+.c27 {
   margin-bottom: 0.625rem;
   margin-top: 0.75rem;
 }
 
-.c43 {
+.c51 {
   font-size: 0.9375rem;
   line-height: 1.5;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -615,7 +743,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   transition: all 300ms ease;
 }
 
-.c39 {
+.c47 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -653,7 +781,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   transition: all 300ms ease;
 }
 
-.c40 {
+.c48 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -682,7 +810,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   flex-direction: row;
 }
 
-.c42 {
+.c50 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -708,7 +836,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   transform: translateY(-50%);
 }
 
-.c45 {
+.c53 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -724,14 +852,14 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   justify-content: flex-end;
 }
 
-.c44 {
+.c52 {
   display: inline-block;
   padding: 0 1.125rem;
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
 }
 
-.c46 {
+.c54 {
   font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
   font-weight: 400;
   -webkit-flex-grow: 1;
@@ -742,7 +870,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   flex-basis: 5.625rem;
 }
 
-.c47 {
+.c55 {
   display: inline-block;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -783,24 +911,45 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin: 0;
 }
 
-.c27 {
+.c35 {
+  margin-top: 0.75rem;
+  min-width: 12.5rem;
+}
+
+.c35 label {
+  font-size: 0.8125rem;
+}
+
+.c37 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-top: 0.375rem;
+}
+
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c27 > div {
+.c26 > div {
   -webkit-flex-grow: 1;
   -ms-flex-grow: 1;
   flex-grow: 1;
 }
 
-.c27 > div:not(:last-child) {
+.c26 > div:not(:last-child) {
   margin-right: 2.25rem;
 }
 
-.c24 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -827,12 +976,12 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
   margin-bottom: 0.5rem;
 }
 
-.c38 {
+.c46 {
   margin-right: 1.125rem;
   margin-bottom: 1.125rem;
 }
 
-.c36 {
+.c44 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -853,7 +1002,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c37 {
+  .c45 {
     -webkit-flex-basis: 100%;
     -ms-flex-basis: 100%;
     flex-basis: 100%;
@@ -863,7 +1012,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:48em) {
-  .c37 {
+  .c45 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -873,7 +1022,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:64em) {
-  .c37 {
+  .c45 {
     -webkit-flex-basis: 33.333333333333336%;
     -ms-flex-basis: 33.333333333333336%;
     flex-basis: 33.333333333333336%;
@@ -883,7 +1032,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:75em) {
-  .c37 {
+  .c45 {
     -webkit-flex-basis: 25%;
     -ms-flex-basis: 25%;
     flex-basis: 25%;
@@ -893,7 +1042,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
 }
 
 @media only screen and (min-width:0em) {
-  .c41 {
+  .c49 {
     -webkit-flex-basis: 50%;
     -ms-flex-basis: 50%;
     flex-basis: 50%;
@@ -1054,37 +1203,37 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           Choose package
         </label>
         <label
-          className="c22 c23"
+          className="c22 c21"
         >
           Filter by package type
         </label>
         <section
-          className="c24"
+          className="c23"
         >
           <div>
             <button
-              className="c25"
+              className="c24"
               onClick={[Function]}
               selected={false}
             >
               Compute Optimized
             </button>
             <button
-              className="c25"
+              className="c24"
               onClick={[Function]}
               selected={false}
             >
               General Purpose
             </button>
             <button
-              className="c25"
+              className="c24"
               onClick={[Function]}
               selected={false}
             >
               Memory Optimized
             </button>
             <button
-              className="c25"
+              className="c24"
               onClick={[Function]}
               selected={false}
             >
@@ -1092,7 +1241,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
             </button>
           </div>
           <button
-            className="c26"
+            className="c25"
             disabled={true}
             onClick={[Function]}
           >
@@ -1105,30 +1254,30 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           Filter by package feature
         </label>
         <section
-          className="c27"
+          className="c26"
         >
           <div>
             <label
-              className="c28 c29"
+              className="c27 c28"
               htmlFor=""
             >
               GB RAM
             </label>
             <div
               aria-disabled={false}
-              className="c30"
+              className="c29"
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
               <div
-                className="c31"
+                className="c30"
                 onMouseDown={[Function]}
                 onTouchStart={[Function]}
               >
                 <div
-                  className="c32"
+                  className="c31"
                   style={
                     Object {
                       "left": "0%",
@@ -1138,7 +1287,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 />
                 <span>
                   <span
-                    className="c33"
+                    className="c32"
                     type="min"
                   >
                     0.256
@@ -1149,7 +1298,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={63.8}
                     aria-valuemin={0.256}
                     aria-valuenow={0.256}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1167,7 +1316,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 </span>
                 <span>
                   <span
-                    className="c35"
+                    className="c34"
                     type="max"
                   >
                     63.8
@@ -1178,7 +1327,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={63.8}
                     aria-valuemin={0.256}
                     aria-valuenow={63.8}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1199,26 +1348,26 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
           <div>
             <label
-              className="c28 c29"
+              className="c27 c28"
               htmlFor=""
             >
               vCPUs
             </label>
             <div
               aria-disabled={false}
-              className="c30"
+              className="c29"
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
               <div
-                className="c31"
+                className="c30"
                 onMouseDown={[Function]}
                 onTouchStart={[Function]}
               >
                 <div
-                  className="c32"
+                  className="c31"
                   style={
                     Object {
                       "left": "0%",
@@ -1228,7 +1377,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 />
                 <span>
                   <span
-                    className="c33"
+                    className="c32"
                     type="min"
                   >
                     0.25
@@ -1239,7 +1388,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={8}
                     aria-valuemin={0.25}
                     aria-valuenow={0.25}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1257,7 +1406,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 </span>
                 <span>
                   <span
-                    className="c35"
+                    className="c34"
                     type="max"
                   >
                     8
@@ -1268,7 +1417,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={8}
                     aria-valuemin={0.25}
                     aria-valuenow={8}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1289,26 +1438,26 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
           <div>
             <label
-              className="c28 c29"
+              className="c27 c28"
               htmlFor=""
             >
               TB Disk
             </label>
             <div
               aria-disabled={false}
-              className="c30"
+              className="c29"
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
               <div
-                className="c31"
+                className="c30"
                 onMouseDown={[Function]}
                 onTouchStart={[Function]}
               >
                 <div
-                  className="c32"
+                  className="c31"
                   style={
                     Object {
                       "left": "0%",
@@ -1318,7 +1467,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 />
                 <span>
                   <span
-                    className="c33"
+                    className="c32"
                     type="min"
                   >
                     0.01
@@ -1329,7 +1478,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={4.9}
                     aria-valuemin={0.01}
                     aria-valuenow={0.01}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1347,7 +1496,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 </span>
                 <span>
                   <span
-                    className="c35"
+                    className="c34"
                     type="max"
                   >
                     4.9
@@ -1358,7 +1507,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={4.9}
                     aria-valuemin={0.01}
                     aria-valuenow={4.9}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1379,26 +1528,26 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
           <div>
             <label
-              className="c28 c29"
+              className="c27 c28"
               htmlFor=""
             >
               $/hr
             </label>
             <div
               aria-disabled={false}
-              className="c30"
+              className="c29"
               onKeyDown={[Function]}
               onKeyUp={[Function]}
               onMouseDown={[Function]}
               onTouchStart={[Function]}
             >
               <div
-                className="c31"
+                className="c30"
                 onMouseDown={[Function]}
                 onTouchStart={[Function]}
               >
                 <div
-                  className="c32"
+                  className="c31"
                   style={
                     Object {
                       "left": "0%",
@@ -1408,7 +1557,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 />
                 <span>
                   <span
-                    className="c33"
+                    className="c32"
                     type="min"
                   >
                     0.016
@@ -1419,7 +1568,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={2.318}
                     aria-valuemin={0.016}
                     aria-valuenow={0.016}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1437,7 +1586,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                 </span>
                 <span>
                   <span
-                    className="c35"
+                    className="c34"
                     type="max"
                   >
                     2.318
@@ -1448,7 +1597,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                     aria-valuemax={2.318}
                     aria-valuemin={0.016}
                     aria-valuenow={2.318}
-                    className="c34"
+                    className="c33"
                     draggable="false"
                     onKeyDown={[Function]}
                     onMouseDown={[Function]}
@@ -1467,6 +1616,107 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
               </div>
             </div>
           </div>
+          <form
+            onChange={[Function]}
+          >
+            <section
+              className="c35"
+            >
+              <legend
+                className="c36"
+              >
+                Disk
+              </legend>
+              <ul
+                className="c37 c38"
+              >
+                <fieldset
+                  className="c39"
+                  style={undefined}
+                >
+                  <div>
+                    <li
+                      checked={false}
+                      className="c40"
+                      name="magnetic"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onDragStart={[Function]}
+                      onDrop={[Function]}
+                      onFocus={[Function]}
+                      value=""
+                    >
+                      <div
+                        className="c41"
+                        type="checkbox"
+                      >
+                        <input
+                          checked={false}
+                          className="c42"
+                          id="qJoBh"
+                          name="magnetic"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onDragStart={[Function]}
+                          onDrop={[Function]}
+                          onFocus={[Function]}
+                          type="checkbox"
+                          value=""
+                        />
+                        <label
+                          className="c43"
+                          htmlFor="qJoBh"
+                        />
+                      </div>
+                      Magnetic
+                    </li>
+                  </div>
+                </fieldset>
+                <fieldset
+                  className="c39"
+                  style={undefined}
+                >
+                  <div>
+                    <li
+                      checked={false}
+                      className="c40"
+                      name="ssd"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onDragStart={[Function]}
+                      onDrop={[Function]}
+                      onFocus={[Function]}
+                      value=""
+                    >
+                      <div
+                        className="c41"
+                        type="checkbox"
+                      >
+                        <input
+                          checked={false}
+                          className="c42"
+                          id="cFaLiF"
+                          name="ssd"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onDragStart={[Function]}
+                          onDrop={[Function]}
+                          onFocus={[Function]}
+                          type="checkbox"
+                          value=""
+                        />
+                        <label
+                          className="c43"
+                          htmlFor="cFaLiF"
+                        />
+                      </div>
+                      SSD
+                    </li>
+                  </div>
+                </fieldset>
+              </ul>
+            </section>
+          </form>
         </section>
       </section>
     </div>
@@ -1474,30 +1724,30 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
       className="c2"
     >
       <section
-        className="c36"
+        className="c44"
       >
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -1506,58 +1756,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.256
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.25
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.01
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Compute Optimized
@@ -1569,27 +1819,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -1598,58 +1848,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.768
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.5
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.025
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Compute Optimized
@@ -1661,27 +1911,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -1690,58 +1940,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       1.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       1
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.05
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Compute Optimized
@@ -1753,27 +2003,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -1782,58 +2032,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       3.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       1
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.5
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       General Purpose
@@ -1845,27 +2095,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -1874,58 +2124,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       3.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Compute Optimized
@@ -1937,27 +2187,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -1966,58 +2216,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       7.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       General Purpose
@@ -2029,27 +2279,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2058,58 +2308,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Memory Optimized
@@ -2121,27 +2371,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2150,58 +2400,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       7.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.2
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Compute Optimized
@@ -2213,27 +2463,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2242,58 +2492,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.2
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       General Purpose
@@ -2305,27 +2555,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2334,58 +2584,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       2
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       1.2
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
-                      SSD
+                      Magnetic
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Storage Optimized
@@ -2397,27 +2647,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2426,58 +2676,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.1
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Memory Optimized
@@ -2489,27 +2739,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2518,58 +2768,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       15.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.4
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Compute Optimized
@@ -2581,27 +2831,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2610,58 +2860,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.4
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       General Purpose
@@ -2673,27 +2923,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2702,58 +2952,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       2.4
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
-                      SSD
+                      Magnetic
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Storage Optimized
@@ -2765,27 +3015,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2794,58 +3044,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.4
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       SSD
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Memory Optimized
@@ -2857,27 +3107,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2886,58 +3136,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       31.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       4
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       0.8
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
-                      SSD
+                      Magnetic
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Storage Optimized
@@ -2949,27 +3199,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -2978,58 +3228,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       4.9
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
-                      SSD
+                      Magnetic
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Storage Optimized
@@ -3041,27 +3291,27 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
           </div>
         </div>
         <div
-          className="c37"
+          className="c45"
         >
           <div
-            className="c38 c39"
+            className="c46 c47"
             name="card"
             onClick={[Function]}
             selected={false}
           >
             <div
-              className="c40"
+              className="c48"
               name="card-view"
             >
               <div
-                className="c41"
+                className="c49"
                 name="card-meta"
               >
                 <div
-                  className="c42"
+                  className="c50"
                 >
                   <div
-                    className="c43"
+                    className="c51"
                     name="card-title"
                     selected={false}
                   >
@@ -3070,58 +3320,58 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
                      per hour
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       63.8
                        GB RAM
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       8
                        vCPUs
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
                       1.6
                        TB disk
                     </span>
                   </div>
                   <div
-                    className="c44 c43"
+                    className="c52 c51"
                     name="card-subtitle"
                     selected={false}
                   >
                     <span
-                      className="c45"
+                      className="c53"
                     >
-                      SSD
+                      Magnetic
                     </span>
                   </div>
                   <div
-                    className="c46 c43"
+                    className="c54 c51"
                     name="card-footer"
                   >
                     <span
-                      className="c47"
+                      className="c55"
                       selected={false}
                     >
                       Storage Optimized
@@ -3138,7 +3388,7 @@ exports[`renders <HomeHOC /> without throwing 1`] = `
       className="c2"
     >
       <button
-        className="c48"
+        className="c56"
       >
         Cancel
       </button>
diff --git a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
index 65ebb017..d572fd87 100644
--- a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
@@ -1164,7 +1164,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1532,7 +1532,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1716,7 +1716,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1808,7 +1808,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
@@ -1900,7 +1900,7 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
               <span
                 className="c9"
               >
-                SSD
+                Magnetic
               </span>
             </div>
             <div
diff --git a/packages/my-joyent/src/data/packages.json b/packages/my-joyent/src/data/packages.json
index b378b50b..83fd29fd 100644
--- a/packages/my-joyent/src/data/packages.json
+++ b/packages/my-joyent/src/data/packages.json
@@ -1,6 +1,7 @@
 [
   {
     "id": 1,
+    "ssd": true,
     "name": "High CPU 0.25",
     "vcpus": 0.25,
     "memory": 0.256,
@@ -10,6 +11,7 @@
   },
   {
     "id": 2,
+    "ssd": true,
     "name": "High CPU 0.75",
     "vcpus": 0.5,
     "memory": 0.768,
@@ -19,6 +21,7 @@
   },
   {
     "id": 3,
+    "ssd": true,
     "name": "High CPU 1.75",
     "vcpus": 1,
     "memory": 1.8,
@@ -28,6 +31,7 @@
   },
   {
     "id": 4,
+    "ssd": true,
     "name": "High CPU 3.75",
     "vcpus": 2,
     "memory": 3.8,
@@ -37,6 +41,7 @@
   },
   {
     "id": 5,
+    "ssd": true,
     "name": "High CPU 7.75",
     "vcpus": 4,
     "memory": 7.8,
@@ -46,6 +51,7 @@
   },
   {
     "id": 6,
+    "ssd": true,
     "name": "High CPU 15.75",
     "vcpus": 8,
     "memory": 15.8,
@@ -55,6 +61,7 @@
   },
   {
     "id": 7,
+    "ssd": true,
     "name": "General 3.75",
     "vcpus": 1,
     "memory": 3.8,
@@ -64,6 +71,7 @@
   },
   {
     "id": 8,
+    "ssd": true,
     "name": "General 7.75",
     "vcpus": 2,
     "memory": 7.8,
@@ -73,6 +81,7 @@
   },
   {
     "id": 9,
+    "ssd": true,
     "name": "General 15.75",
     "vcpus": 4,
     "memory": 15.8,
@@ -82,6 +91,7 @@
   },
   {
     "id": 10,
+    "ssd": true,
     "name": "General 31.75",
     "vcpus": 8,
     "memory": 31.8,
@@ -91,6 +101,7 @@
   },
   {
     "id": 11,
+    "ssd": true,
     "name": "High RAM 15.75",
     "vcpus": 2,
     "memory": 15.8,
@@ -100,6 +111,7 @@
   },
   {
     "id": 12,
+    "ssd": true,
     "name": "High RAM 31.75",
     "vcpus": 4,
     "memory": 31.8,
@@ -109,6 +121,7 @@
   },
   {
     "id": 13,
+    "ssd": true,
     "name": "High RAM 63.75",
     "vcpus": 8,
     "memory": 63.8,
@@ -118,6 +131,7 @@
   },
   {
     "id": 14,
+    "ssd": false,
     "name": "Fast Disk 31.75",
     "vcpus": 4,
     "memory": 31.8,
@@ -127,6 +141,7 @@
   },
   {
     "id": 15,
+    "ssd": false,
     "name": "Fast Disk 63.75",
     "vcpus": 8,
     "memory": 63.8,
@@ -136,6 +151,7 @@
 },
   {
     "id": 16,
+    "ssd": false,
     "name": "Big Disk 15.75",
     "vcpus": 2,
     "memory": 15.8,
@@ -145,6 +161,7 @@
   },
   {
     "id": 17,
+    "ssd": false,
     "name": "Big Disk 31.75",
     "vcpus": 4,
     "memory": 31.8,
@@ -154,6 +171,7 @@
   },
   {
     "id": 18,
+    "ssd": false,
     "name": "Big Disk 63.75",
     "vcpus": 8,
     "memory": 63.8,
diff --git a/packages/my-joyent/src/state/filterReducer.js b/packages/my-joyent/src/state/filterReducer.js
index d660e7f0..f4e12487 100644
--- a/packages/my-joyent/src/state/filterReducer.js
+++ b/packages/my-joyent/src/state/filterReducer.js
@@ -1,4 +1,5 @@
 import { default as defaultState } from './state';
+import isEmpty from 'lodash.isempty';
 
 const selectedGroups = groups =>
   groups.filter(group => group.selected).map(group => group.name);
@@ -34,9 +35,16 @@ const filterReducer = (state = defaultState, action) => {
           )
           .filter(
             pack =>
-                selectedGroups(action.filters.groups).length > 0 ? 
-                  selectedGroups(action.filters.groups).includes(pack.group) : 
-                  true
+              isEmpty(action.filters.diskType)
+                ? true
+                : pack.ssd === action.filters.diskType.ssd ||
+                  !pack.ssd === action.filters.diskType.magnetic
+          )
+          .filter(
+            pack =>
+              selectedGroups(action.filters.groups).length > 0
+                ? selectedGroups(action.filters.groups).includes(pack.group)
+                : true
           )
       };
 
diff --git a/packages/my-joyent/src/state/state.js b/packages/my-joyent/src/state/state.js
index 31ab5cd9..3e1fdb85 100644
--- a/packages/my-joyent/src/state/state.js
+++ b/packages/my-joyent/src/state/state.js
@@ -6,6 +6,10 @@ const state = {
     cost: { min: 0.016, max: 2.318 },
     ram: { min: 0.256, max: 63.8 },
     disk: { min: 0.01, max: 4.9 },
+    diskType: {
+      magnetic: true,
+      ssd: true
+    },
     groups: [
       { name: 'Compute Optimized', selected: false },
       { name: 'Memory Optimized', selected: false },
diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js
index cde28564..e9015575 100644
--- a/packages/ui-toolkit/src/form/base/toggle.js
+++ b/packages/ui-toolkit/src/form/base/toggle.js
@@ -32,20 +32,26 @@ const StyledInput = Input.extend`
 const Label = styled.label`
   color: rgb(100, 100, 100);
   position: absolute;
-  width: ${remcalc(22)};
-  height: ${remcalc(22)};
+  width: ${remcalc(18)};
+  height: ${remcalc(18)};
   top: 0;
+  box-sizing: border-box;
 
   background-color: rgb(255, 255, 255);
-  box-shadow: ${insetShaddow};
-  border: ${border.unchecked};
+  box-shadow: none;
+  border: 1px solid ${props => props.theme.grey};
+  cursor: pointer;
 
   ${is('checkbox')`
-    border-radius: ${borderRadius};
+    border-radius: 4px;
+    width: ${remcalc(18)};
+    height: ${remcalc(18)};
   `};
 
   ${is('radio')`
-    border-radius: ${remcalc(11)};
+    width: ${remcalc(18)};
+    height: ${remcalc(18)};
+    border-radius: 50%;
   `};
 
   ${is('error')`
@@ -65,12 +71,13 @@ const Label = styled.label`
       opacity: 0;
       content: '';
       position: absolute;
-      width: ${remcalc(10)};
-      height: ${remcalc(10)};
-      border-radius: ${remcalc(5)};
-      background-color: ${props => props.theme.secondaryActive};
-      top: ${remcalc(6)};
-      left: ${remcalc(6)};
+      width: ${remcalc(6)};
+      height: ${remcalc(6)};
+      border-radius: 50%;
+      background-color: ${props => props.theme.text};
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
     }
   `};
 
@@ -79,31 +86,25 @@ const Label = styled.label`
       opacity: 0;
       content: '';
       position: absolute;
-      width: ${unitcalc(1.5)};
-      height: ${remcalc(4)};
+      width: ${remcalc(6)};
+      height: ${remcalc(2)};
       background: transparent;
-      top: ${remcalc(7)};
-      left: ${remcalc(7)};
-      border: ${unitcalc(0.5)} solid ${props => props.theme.secondaryActive};
+      top: ${remcalc(5)};
+      left: ${remcalc(4)};
+      border: ${remcalc(2)} solid ${props => props.theme.secondaryActive};
       border-top: none;
       border-right: none;
       transform: rotate(-45deg);
     }
   `};
-
-  &:hover {
-    &::after {
-      opacity: 0.3;
-    }
-  }
 `;
 
 const InnerContainer = styled.div`
   display: inline-block;
   vertical-align: text-bottom;
-  margin-right: ${unitcalc(2)};
-  width: ${unitcalc(4)};
-  height: ${unitcalc(4)};
+  margin-right: ${remcalc(8)};
+  width: ${remcalc(18)};
+  height: ${remcalc(18)};
   position: relative;
 `;
 
@@ -126,7 +127,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
 
       const toggle = (
         <InnerContainer {...types} type={type}>
-          <StyledInput {...rest} {...oldValue} id={newValue.id} type={type} />
+          <StyledInput {...rest} id={newValue.id} type={type} />
           <Label
             {...types}
             htmlFor={newValue.id}
diff --git a/packages/ui-toolkit/src/form/checkbox.js b/packages/ui-toolkit/src/form/checkbox.js
index 93417f87..b29e23ad 100644
--- a/packages/ui-toolkit/src/form/checkbox.js
+++ b/packages/ui-toolkit/src/form/checkbox.js
@@ -1,11 +1,29 @@
+import styled from 'styled-components';
+import typography from '../typography';
 import BaseInput from './base/input';
 import BaseToggle from './base/toggle';
 import Baseline from '../baseline';
 import React from 'react';
 
+const Li = styled.li`
+  list-style-type: none;
+  ${typography.fontFamily};
+  ${typography.normal};
+`;
+
+const Ul = styled.ul`
+  margin: 0;
+  padding: 0;
+`;
+
+const CheckboxItem = BaseInput(({ children, id, ...rest }) => (
+  <Li {...rest}>{children}</Li>
+));
+
 const Checkbox = Baseline(
   BaseInput(
     BaseToggle({
+      container: CheckboxItem,
       type: 'checkbox'
     })
   )
@@ -17,3 +35,5 @@ const Checkbox = Baseline(
 export default ({ children, ...rest }) => (
   <Checkbox {...rest}>{children}</Checkbox>
 );
+
+export const CheckboxList = Baseline(Ul);
diff --git a/packages/ui-toolkit/src/form/index.js b/packages/ui-toolkit/src/form/index.js
index 085f810d..8505c6f5 100644
--- a/packages/ui-toolkit/src/form/index.js
+++ b/packages/ui-toolkit/src/form/index.js
@@ -1,4 +1,4 @@
-export { default as Checkbox } from './checkbox';
+export { default as Checkbox, CheckboxList } from './checkbox';
 export { default as Fieldset } from './fieldset';
 export { default as FormGroup } from './group';
 export { default as Input } from './input';
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index a6df6e0c..66ab9ec8 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -76,6 +76,7 @@ export {
 
 export {
   Checkbox,
+  CheckboxList,
   Fieldset,
   FormGroup,
   Input,
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
index 160cc1c7..60ff180e 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
@@ -621,7 +621,7 @@ export default class InputRange extends Component {
       this.props,
       this.isMultiValue()
     );
-    let percentages = valueTransformer.getPercentagesFromValues(
+    const percentages = valueTransformer.getPercentagesFromValues(
       values,
       this.props.minValue,
       this.props.maxValue
diff --git a/yarn.lock b/yarn.lock
index 815b2977..66389204 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6775,6 +6775,10 @@ lodash.isarraylike@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.isarraylike/-/lodash.isarraylike-4.2.0.tgz#4623310ab318804b667ddc3619058137559400c4"
 
+lodash.isempty@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"