diff --git a/packages/react/src/components/a11y/styles/visuallyhidden.js b/packages/react/src/components/a11y/styles/visuallyhidden.js
deleted file mode 100644
index d08ec90238..0000000000
--- a/packages/react/src/components/a11y/styles/visuallyhidden.js
+++ /dev/null
@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// Visually hiding text but not for the screen readers
-exports.styles = "\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px !important;\n  overflow: hidden;\n  padding:0 !important;\n  position: absolute !important;\n  width: 1px !important;\n";
diff --git a/packages/react/src/components/a11y/visuallyhidden.js b/packages/react/src/components/a11y/visuallyhidden.js
deleted file mode 100644
index 57b5832873..0000000000
--- a/packages/react/src/components/a11y/visuallyhidden.js
+++ /dev/null
@@ -1,21 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var visuallyhidden_1 = require("./styles/visuallyhidden");
-var Hidden = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), visuallyhidden_1.styles);
-var VisuallyHidden = function (_a) {
-    var children = _a.children;
-    return (<Hidden>
-        {children}
-    </Hidden>);
-};
-exports.VisuallyHidden = VisuallyHidden;
-var templateObject_1;
diff --git a/packages/react/src/components/buttons/abstract-button.js b/packages/react/src/components/buttons/abstract-button.js
deleted file mode 100644
index 971afbd1d5..0000000000
--- a/packages/react/src/components/buttons/abstract-button.js
+++ /dev/null
@@ -1,14 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = __importDefault(require("styled-components"));
-var abstract_1 = require("./styles/abstract");
-var AbstractButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), abstract_1.styles);
-exports.AbstractButton = AbstractButton;
-var templateObject_1;
diff --git a/packages/react/src/components/buttons/add-button.js b/packages/react/src/components/buttons/add-button.js
deleted file mode 100644
index bcb91069d1..0000000000
--- a/packages/react/src/components/buttons/add-button.js
+++ /dev/null
@@ -1,24 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var plus_svg_1 = __importDefault(require("feather-icons/dist/icons/plus.svg"));
-var button_1 = require("./button");
-var PlusIcon = styled_components_1.default(plus_svg_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1rem;\n  margin-right: 0.5rem;\n  width: 1rem;\n"], ["\n  height: 1rem;\n  margin-right: 0.5rem;\n  width: 1rem;\n"])));
-var AddButton = function (_a) {
-    var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, buttonType = _a.buttonType;
-    var handleClick = function () { onClick && onClick(); };
-    return (<button_1.Button disabled={disabled} onClick={handleClick} buttonType={buttonType}>
-        <PlusIcon />
-            {children}
-        </button_1.Button>);
-};
-exports.AddButton = AddButton;
-var templateObject_1;
diff --git a/packages/react/src/components/buttons/button.js b/packages/react/src/components/buttons/button.js
deleted file mode 100644
index f981b31e40..0000000000
--- a/packages/react/src/components/buttons/button.js
+++ /dev/null
@@ -1,33 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var primary_1 = require("./styles/primary");
-var secondary_1 = require("./styles/secondary");
-var tertiary_1 = require("./styles/tertiary");
-var abstract_button_1 = require("./abstract-button");
-var StyledButton = styled_components_1.default(abstract_button_1.AbstractButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ",
-    "\n"])), function (props) {
-    if (props.buttonType === 'secondary') {
-        return secondary_1.secondaryStyles;
-    }
-    else if (props.buttonType === 'tertiary') {
-        return tertiary_1.tertiaryStyles;
-    }
-    return primary_1.primaryStyles;
-});
-exports.Button = function (_a) {
-    var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, buttonType = _a.buttonType;
-    var handleClick = function () { onClick && onClick(); };
-    return (<StyledButton disabled={disabled} onClick={handleClick} buttonType={buttonType}>
-            {children}
-        </StyledButton>);
-};
-var templateObject_1;
diff --git a/packages/react/src/components/buttons/search-button.js b/packages/react/src/components/buttons/search-button.js
deleted file mode 100644
index 9f25e68c78..0000000000
--- a/packages/react/src/components/buttons/search-button.js
+++ /dev/null
@@ -1,22 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var abstract_button_1 = require("./abstract-button");
-var StyledButton = styled_components_1.default(abstract_button_1.AbstractButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: rgb(255, 255, 255);\n    border-color: rgb(217, 221, 226);\n    color: rgb(99, 114, 130);\n\n    &:focus,\n    &:hover {\n        background-color: rgb(217, 221, 226);\n        border-color: rgb(217, 221, 226);\n        color: rgb(99, 114, 130);\n    }\n\n    &:disabled {\n        &,\n        &:focus,\n        &:hover {\n            background-color: rgb(242, 243, 249);\n            border-color: rgb(217, 221, 226);\n            color: rgb(156, 167, 180);\n        }\n    }\n"], ["\n    background: rgb(255, 255, 255);\n    border-color: rgb(217, 221, 226);\n    color: rgb(99, 114, 130);\n\n    &:focus,\n    &:hover {\n        background-color: rgb(217, 221, 226);\n        border-color: rgb(217, 221, 226);\n        color: rgb(99, 114, 130);\n    }\n\n    &:disabled {\n        &,\n        &:focus,\n        &:hover {\n            background-color: rgb(242, 243, 249);\n            border-color: rgb(217, 221, 226);\n            color: rgb(156, 167, 180);\n        }\n    }\n"])));
-var SearchButton = function (_a) {
-    var children = _a.children, className = _a.className, disabled = _a.disabled, onClick = _a.onClick;
-    var handleClick = function () { onClick && onClick(); };
-    return (<StyledButton className={className} disabled={disabled} onClick={handleClick}>
-            {children}
-        </StyledButton>);
-};
-exports.SearchButton = SearchButton;
-var templateObject_1;
diff --git a/packages/react/src/components/buttons/styles/abstract.js b/packages/react/src/components/buttons/styles/abstract.js
deleted file mode 100644
index 26d8fe25e4..0000000000
--- a/packages/react/src/components/buttons/styles/abstract.js
+++ /dev/null
@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styles = "\n  align-items: center;\n  appearance: none;\n  background: inherit;\n  border: 1px solid;\n  border-radius: 1.25rem;\n  box-sizing: border-box;\n  color: inherit;\n  display: inline-flex;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.025rem;\n  line-height: normal;\n  min-height: 2rem;\n  min-width: 2rem;\n  outline: none;\n  padding: 0.5rem 1rem;\n  text-transform: uppercase;\n  transition: all 0.2s ease-in-out;\n  user-select: none;\n\n  &:not(:disabled) {\n    cursor: pointer;\n  }\n\n  > svg {\n    color: inherit;\n  }\n";
diff --git a/packages/react/src/components/buttons/styles/primary.js b/packages/react/src/components/buttons/styles/primary.js
deleted file mode 100644
index 80dcce4114..0000000000
--- a/packages/react/src/components/buttons/styles/primary.js
+++ /dev/null
@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.primaryStyles = "\n  background-color: rgb(226, 115, 46);\n  border-color: rgb(226, 115, 46);\n  color: white;\n\n  &:focus,\n  &:hover {\n    background-color: rgb(183, 94, 43);\n    border-color: rgb(183, 94, 43);\n  }\n\n  &:disabled {\n    &,\n    &:focus,\n    &:hover {\n      background-color: rgb(240, 185, 150);\n      border-color: rgb(240, 185, 150);\n    }\n  }\n";
diff --git a/packages/react/src/components/buttons/styles/secondary.js b/packages/react/src/components/buttons/styles/secondary.js
deleted file mode 100644
index 3d0a94b5d7..0000000000
--- a/packages/react/src/components/buttons/styles/secondary.js
+++ /dev/null
@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.secondaryStyles = "\n  background-color: transparent;\n  border-color: rgb(226, 115, 46);\n  color: rgb(226, 115, 46);\n\n  &:focus,\n  &:hover {\n    background-color: rgb(226, 115, 46);\n    border-color: rgb(226, 115, 46);\n    color: white;\n  }\n\n  &:disabled {\n      &,\n      &:focus,\n      &:hover {\n        background-color: transparent;\n        border-color: rgb(240, 185, 150);\n        color: rgb(240, 185, 150);\n      }\n  }\n";
diff --git a/packages/react/src/components/buttons/styles/tertiary.js b/packages/react/src/components/buttons/styles/tertiary.js
deleted file mode 100644
index 9c7a85df08..0000000000
--- a/packages/react/src/components/buttons/styles/tertiary.js
+++ /dev/null
@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tertiaryStyles = "\n  background-color: transparent;\n  border-color: transparent;\n  color: #637282;\n\n  &:focus,\n  &:hover {\n    color: black;\n  }\n\n  &:disabled {\n    &,\n    &:focus,\n    &:hover {\n      color: rgba(0, 0, 0, 0.4);\n    }\n  }\n";
diff --git a/packages/react/src/components/card.js b/packages/react/src/components/card.js
deleted file mode 100644
index 8820e48058..0000000000
--- a/packages/react/src/components/card.js
+++ /dev/null
@@ -1,13 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = __importDefault(require("styled-components"));
-var Card = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(220, 220, 220);\n  border-radius: 0.5rem;\n  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  margin-bottom: 2rem;\n  padding: 3rem 2rem;\n"], ["\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(220, 220, 220);\n  border-radius: 0.5rem;\n  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);\n  box-sizing: border-box;\n  margin-bottom: 2rem;\n  padding: 3rem 2rem;\n"])));
-exports.Card = Card;
-var templateObject_1;
diff --git a/packages/react/src/components/enso-spinner.js b/packages/react/src/components/enso-spinner.js
deleted file mode 100644
index fecc2dc0ab..0000000000
--- a/packages/react/src/components/enso-spinner.js
+++ /dev/null
@@ -1,14 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = __importDefault(require("styled-components"));
-var enso_svg_1 = __importDefault(require("../icons/enso.svg"));
-var EnsoSpinner = styled_components_1.default(enso_svg_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: roll 1s infinite;\n  animation-timing-function: linear;\n  fill: #e2732d;\n  height: 80px;\n  width: 83px;\n\n  @keyframes roll {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], ["\n  animation: roll 1s infinite;\n  animation-timing-function: linear;\n  fill: #e2732d;\n  height: 80px;\n  width: 83px;\n\n  @keyframes roll {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"])));
-exports.EnsoSpinner = EnsoSpinner;
-var templateObject_1;
diff --git a/packages/react/src/components/feedbacks/invalid-field.js b/packages/react/src/components/feedbacks/invalid-field.js
deleted file mode 100644
index 2267d5648d..0000000000
--- a/packages/react/src/components/feedbacks/invalid-field.js
+++ /dev/null
@@ -1,20 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Field = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: rgb(164, 12, 46);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.0166em;\n  line-height: 1.1666;\n  margin: 0.25rem 0 0;\n"], ["\n  color: rgb(164, 12, 46);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.0166em;\n  line-height: 1.1666;\n  margin: 0.25rem 0 0;\n"])));
-var InvalidField = function (_a) {
-    var controlId = _a.controlId, feedbackMsg = _a.feedbackMsg;
-    return (<Field role="alert" aria-live="polite" id={controlId + "_invalid"}>
-        {feedbackMsg}
-    </Field>);
-};
-exports.InvalidField = InvalidField;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/field-container.js b/packages/react/src/components/forms/field-container.js
deleted file mode 100644
index df00e7bbb0..0000000000
--- a/packages/react/src/components/forms/field-container.js
+++ /dev/null
@@ -1,40 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var invalid_field_1 = require("../feedbacks/invalid-field");
-var label_1 = require("./label");
-var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0 0 1.5rem;\n\n  input,\n  select,\n  textarea {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"], ["\n  margin: 0 0 1.5rem;\n\n  input,\n  select,\n  textarea {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) { return (props.valid ? 'rgb(217, 221, 226)' : 'rgb(164, 12, 46)'); }, function (props) { return (props.valid ? 'rgb(0, 128, 165)' : 'rgb(164, 12, 46)'); });
-var FieldContainer = function (_a) {
-    var children = _a.children, fieldId = _a.fieldId, label = _a.label, valid = _a.valid, validMsg = _a.validMsg, props = __rest(_a, ["children", "fieldId", "label", "valid", "validMsg"]);
-    return (<StyledDiv {...props} valid={valid}>
-        {label && (<label_1.Label forId={fieldId}>
-                {label}
-            </label_1.Label>)}
-
-        {children}
-
-        {!valid &&
-        <invalid_field_1.InvalidField controlId={fieldId} feedbackMsg={validMsg}/>}
-    </StyledDiv>);
-};
-exports.FieldContainer = FieldContainer;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/field-container.tsx b/packages/react/src/components/forms/field-container.tsx
index d7ca6c4c6a..66e2be5b71 100644
--- a/packages/react/src/components/forms/field-container.tsx
+++ b/packages/react/src/components/forms/field-container.tsx
@@ -11,11 +11,11 @@ const StyledDiv = styled.div`
   input,
   select,
   textarea {
-    border-color: ${(props: FieldContainerProps) => (props.valid ? 'rgb(217, 221, 226)' : 'rgb(164, 12, 46)')};
+    border-color: ${(props: {valid: boolean}) => (props.valid ? 'rgb(217, 221, 226)' : 'rgb(164, 12, 46)')};
   }
 
   &:focus {
-    border-color: ${(props: FieldContainerProps) => (props.valid ? 'rgb(0, 128, 165)' : 'rgb(164, 12, 46)')};
+    border-color: ${(props: {valid: boolean}) => (props.valid ? 'rgb(0, 128, 165)' : 'rgb(164, 12, 46)')};
   }
 `;
 
diff --git a/packages/react/src/components/forms/inputs/checkbox.js b/packages/react/src/components/forms/inputs/checkbox.js
deleted file mode 100644
index a0318050cc..0000000000
--- a/packages/react/src/components/forms/inputs/checkbox.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 16px;\n  margin: 0;\n  width: 16px;\n"], ["\n  height: 16px;\n  margin: 0;\n  width: 16px;\n"])));
-var Checkbox = function (_a) {
-    var defaultChecked = _a.defaultChecked, onChange = _a.onChange;
-    var ref = react_1.default.createRef();
-    var handleChange = function () {
-        if (typeof onChange === 'function') {
-            if (ref.current === null)
-                return;
-            onChange(ref.current.checked);
-        }
-    };
-    return (<Input defaultChecked={defaultChecked} ref={ref} onChange={handleChange} type="checkbox"/>);
-};
-exports.Checkbox = Checkbox;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/inputs/option-button.js b/packages/react/src/components/forms/inputs/option-button.js
deleted file mode 100644
index 04c78ccbe0..0000000000
--- a/packages/react/src/components/forms/inputs/option-button.js
+++ /dev/null
@@ -1,21 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: -1;\n\n  + label {\n    align-items: center;\n    background-color: #fff;\n    border: 1px solid #d9dde2;\n    border-radius: 8px;\n    color: #637282;\n    display: flex;\n    font-size: 24px;\n    justify-content: center;\n    min-height: 40px;\n  }\n\n  &:checked + label {\n    background-color: #006296;\n    border-color: #006296;\n    color: #fff;\n  }\n"], ["\n  position: absolute;\n  z-index: -1;\n\n  + label {\n    align-items: center;\n    background-color: #fff;\n    border: 1px solid #d9dde2;\n    border-radius: 8px;\n    color: #637282;\n    display: flex;\n    font-size: 24px;\n    justify-content: center;\n    min-height: 40px;\n  }\n\n  &:checked + label {\n    background-color: #006296;\n    border-color: #006296;\n    color: #fff;\n  }\n"])));
-var OptionButton = function (_a) {
-    var checked = _a.checked, label = _a.label, name = _a.name, value = _a.value;
-    return (<div>
-        <Input checked={checked} id="id" name={name} type="radio" value={value}/>
-        <label htmlFor="id">{label}</label>
-    </div>);
-};
-exports.OptionButton = OptionButton;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/inputs/search-contextual.js b/packages/react/src/components/forms/inputs/search-contextual.js
deleted file mode 100644
index fcaa0cd5de..0000000000
--- a/packages/react/src/components/forms/inputs/search-contextual.js
+++ /dev/null
@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var search_input_1 = require("./search-input");
-var SearchContextual = function (_a) {
-    var disabled = _a.disabled, id = _a.id, label = _a.label, onChange = _a.onChange;
-    return (<search_input_1.SearchInput disabled={disabled} id={id} label={label} onChange={onChange}/>);
-};
-exports.SearchContextual = SearchContextual;
diff --git a/packages/react/src/components/forms/inputs/search-global.js b/packages/react/src/components/forms/inputs/search-global.js
deleted file mode 100644
index 4a8918c7a3..0000000000
--- a/packages/react/src/components/forms/inputs/search-global.js
+++ /dev/null
@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var search_input_1 = require("./search-input");
-var SearchGlobal = function (_a) {
-    var disabled = _a.disabled, id = _a.id, label = _a.label, onSearch = _a.onSearch;
-    return (<search_input_1.SearchInput disabled={disabled} hasButton id={id} label={label} onSearch={onSearch}/>);
-};
-exports.SearchGlobal = SearchGlobal;
diff --git a/packages/react/src/components/forms/inputs/search-input.js b/packages/react/src/components/forms/inputs/search-input.js
deleted file mode 100644
index 7903e9e037..0000000000
--- a/packages/react/src/components/forms/inputs/search-input.js
+++ /dev/null
@@ -1,76 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var search_svg_1 = __importDefault(require("feather-icons/dist/icons/search.svg"));
-var x_svg_1 = __importDefault(require("feather-icons/dist/icons/x.svg"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var visuallyhidden_1 = require("../../a11y/visuallyhidden");
-var search_button_1 = require("../../buttons/search-button");
-var label_1 = require("../label");
-var inputs_1 = require("../styles/inputs");
-var SearchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n\n  label {\n    bottom: 0.5rem;\n    color: rgb(99, 114, 130);\n    display: inline-block;\n    height: 1rem;\n    left: 0.5rem;\n    margin: auto;\n    position: absolute;\n    top: 0.5rem;\n    width: 1rem;\n  }\n"], ["\n  display: flex;\n\n  label {\n    bottom: 0.5rem;\n    color: rgb(99, 114, 130);\n    display: inline-block;\n    height: 1rem;\n    left: 0.5rem;\n    margin: auto;\n    position: absolute;\n    top: 0.5rem;\n    width: 1rem;\n  }\n"])));
-var InnerWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  position: relative;\n"], ["\n  flex: 1 1 auto;\n  position: relative;\n"])));
-var IcoSearch = styled_components_1.default(search_svg_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  height: 1rem;\n  width: 1rem;\n"], ["\n  color: ", ";\n  height: 1rem;\n  width: 1rem;\n"])), function (props) { return (props.disabled ? 'rgb(156, 167, 180)' : 'rgb(99, 114, 130)'); });
-var IcoReset = styled_components_1.default(x_svg_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: black;\n  height: 0.75rem;\n  width: 0.75rem;\n"], ["\n  color: black;\n  height: 0.75rem;\n  width: 0.75rem;\n"])));
-var Input = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", " /* Must be the first rule */\n  border-radius: ", ";\n  line-height: 1;\n  padding: 0.5rem 1.75rem 0.5rem 2rem;\n\n  label + & {\n    margin-top: 0;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n"], ["\n  ", " /* Must be the first rule */\n  border-radius: ", ";\n  line-height: 1;\n  padding: 0.5rem 1.75rem 0.5rem 2rem;\n\n  label + & {\n    margin-top: 0;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n"])), inputs_1.styles, function (props) { return (props.hasButton && '0.25rem 0 0 0.25rem'); });
-var Reset = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  appearance: none;\n  background: transparent;\n  border: 0;\n  bottom: 0.5rem;\n  cursor: pointer;\n  display: none;\n  height: 0.75rem;\n  margin: auto;\n  padding: 0;\n  position: absolute;\n  right: 0.5rem;\n  top: 0.5rem;\n  width: 0.75rem;\n\n  input:valid + & {\n    display: inline-block;\n  }\n"], ["\n  appearance: none;\n  background: transparent;\n  border: 0;\n  bottom: 0.5rem;\n  cursor: pointer;\n  display: none;\n  height: 0.75rem;\n  margin: auto;\n  padding: 0;\n  position: absolute;\n  right: 0.5rem;\n  top: 0.5rem;\n  width: 0.75rem;\n\n  input:valid + & {\n    display: inline-block;\n  }\n"])));
-var SearchSubmit = styled_components_1.default(search_button_1.SearchButton)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-left: 0;\n  border-radius: 0 0.25rem 0.25rem 0;\n  position: relative;\n"], ["\n  border-left: 0;\n  border-radius: 0 0.25rem 0.25rem 0;\n  position: relative;\n"])));
-var SearchInput = function (_a) {
-    var disabled = _a.disabled, hasButton = _a.hasButton, id = _a.id, label = _a.label, onChange = _a.onChange, onSearch = _a.onSearch;
-    var _b = react_1.useState({ value: '' }), value = _b[0].value, setValue = _b[1];
-    var handleChange = function (event) {
-        var newValue = event.target.value;
-        setValue({ value: newValue });
-        if (typeof onChange === 'function') {
-            onChange(newValue);
-        }
-    };
-    var handleKeyDown = function (event) {
-        if (typeof onSearch === 'function' && event.keyCode === 13) {
-            onSearch(value);
-        }
-    };
-    var handleReset = function () {
-        setValue({ value: '' });
-    };
-    var handleSearchButtonClick = function () {
-        if (typeof onSearch === 'function') {
-            onSearch(value);
-        }
-    };
-    return (<SearchWrapper>
-            <InnerWrapper>
-                <label_1.Label forId={id}>
-                    <IcoSearch disabled={disabled}/>
-                    <visuallyhidden_1.VisuallyHidden>{label}</visuallyhidden_1.VisuallyHidden>
-                </label_1.Label>
-
-                <Input autoComplete="on" disabled={disabled} onChange={function (event) { handleChange(event); }} onKeyDown={function (event) { handleKeyDown(event); }} hasButton={hasButton} id={id} type="search" value={value}/>
-
-                <Reset onClick={handleReset}>
-                    <IcoReset />
-                    <visuallyhidden_1.VisuallyHidden>Reset</visuallyhidden_1.VisuallyHidden>
-                </Reset>
-            </InnerWrapper>
-            {hasButton &&
-        (<SearchSubmit disabled={disabled} className="primary" onClick={handleSearchButtonClick}>
-                {label}
-            </SearchSubmit>)}
-        </SearchWrapper>);
-};
-exports.SearchInput = SearchInput;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
diff --git a/packages/react/src/components/forms/inputs/text-area.js b/packages/react/src/components/forms/inputs/text-area.js
deleted file mode 100644
index 3ef275b16d..0000000000
--- a/packages/react/src/components/forms/inputs/text-area.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var inputs_1 = require("../styles/inputs");
-var field_container_1 = require("../field-container");
-var StyledTextArea = styled_components_1.default.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  min-height: 6.5rem;\n  min-width: 100%;\n  outline: none;\n  overflow: auto;\n  resize: vertical;\n"], ["\n  ", "\n  min-height: 6.5rem;\n  min-width: 100%;\n  outline: none;\n  overflow: auto;\n  resize: vertical;\n"])), inputs_1.styles);
-var TextArea = function (_a) {
-    var defaultValue = _a.defaultValue, disabled = _a.disabled, id = _a.id, label = _a.label, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, required = _a.required, validMsg = _a.validMsg;
-    var _b = react_1.useState({ value: defaultValue || '' }), value = _b[0].value, setValue = _b[1];
-    var _c = react_1.useState({ validity: true }), validity = _c[0].validity, setValidity = _c[1];
-    var handleBlur = function (event) {
-        var newValue = event.target.value;
-        setValue({ value: newValue });
-        setValidity({ validity: event.target.checkValidity() });
-        if (typeof onBlur === 'function') {
-            onBlur(newValue);
-        }
-    };
-    var handleChange = function (event) {
-        var newValue = event.target.value;
-        setValue({ value: newValue });
-        if (typeof onChange === 'function') {
-            onChange(newValue);
-        }
-    };
-    var handleFocus = function () {
-        if (typeof onFocus === 'function') {
-            onFocus(value);
-        }
-    };
-    return (<field_container_1.FieldContainer fieldId={id} label={label} valid={validity} validMsg={validMsg || 'This text area input is invalid'}>
-            <StyledTextArea disabled={disabled} id={id} onBlur={function (event) { handleBlur(event); }} onChange={function (event) { handleChange(event); }} onFocus={handleFocus} required={required} value={value}/>
-        </field_container_1.FieldContainer>);
-};
-exports.TextArea = TextArea;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/inputs/text-input.js b/packages/react/src/components/forms/inputs/text-input.js
deleted file mode 100644
index a27fcc05b7..0000000000
--- a/packages/react/src/components/forms/inputs/text-input.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var inputs_1 = require("../styles/inputs");
-var field_container_1 = require("../field-container");
-var Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), inputs_1.styles);
-var TextInput = function (_a) {
-    var defaultValue = _a.defaultValue, disabled = _a.disabled, id = _a.id, label = _a.label, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, pattern = _a.pattern, placeholder = _a.placeholder, required = _a.required, type = _a.type, validMsg = _a.validMsg;
-    var _b = react_1.useState({ value: defaultValue || '' }), value = _b[0].value, setValue = _b[1];
-    var _c = react_1.useState({ validity: true }), validity = _c[0].validity, setValidity = _c[1];
-    var handleBlur = function (event) {
-        var newValue = event.target.value;
-        setValue({ value: newValue });
-        setValidity({ validity: event.target.checkValidity() });
-        if (typeof onBlur === 'function') {
-            onBlur(newValue);
-        }
-    };
-    var handleChange = function (event) {
-        var newValue = event.target.value;
-        setValue({ value: newValue });
-        if (typeof onChange === 'function') {
-            onChange(newValue);
-        }
-    };
-    var handleFocus = function () {
-        if (typeof onFocus === 'function') {
-            onFocus(value);
-        }
-    };
-    return (<field_container_1.FieldContainer fieldId={id} label={label} valid={validity} validMsg={validMsg || 'This text input is invalid'}>
-            <Input disabled={disabled} id={id} onBlur={function (event) { handleBlur(event); }} onChange={function (event) { handleChange(event); }} onFocus={handleFocus} pattern={pattern} placeholder={placeholder} required={required} type={type || 'text'} value={value}/>
-        </field_container_1.FieldContainer>);
-};
-exports.TextInput = TextInput;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/label.js b/packages/react/src/components/forms/label.js
deleted file mode 100644
index e97bbccacf..0000000000
--- a/packages/react/src/components/forms/label.js
+++ /dev/null
@@ -1,20 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var StyledLabel = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: rgb(0, 0, 0);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.0166em;\n  line-height: 1.1666;\n  margin: 0;\n\n  input + & {\n    margin-left: 0.5rem;\n  }\n"], ["\n  color: rgb(0, 0, 0);\n  font-size: 0.75rem;\n  font-weight: 400;\n  letter-spacing: 0.0166em;\n  line-height: 1.1666;\n  margin: 0;\n\n  input + & {\n    margin-left: 0.5rem;\n  }\n"])));
-var Label = function (_a) {
-    var children = _a.children, forId = _a.forId;
-    return (<StyledLabel htmlFor={forId}>
-        {children}
-    </StyledLabel>);
-};
-exports.Label = Label;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/selects/Select.js b/packages/react/src/components/forms/selects/Select.js
deleted file mode 100644
index 533487fe0d..0000000000
--- a/packages/react/src/components/forms/selects/Select.js
+++ /dev/null
@@ -1,50 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var field_container_1 = require("../field-container");
-var inputs_js_1 = require("../styles/inputs.js");
-var StyledSelect = styled_components_1.default.select(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");\n  background-position: right 0.75rem center;\n  background-repeat: no-repeat;\n  background-size: 0.75rem;\n  position: relative;\n"], ["\n  ", "\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");\n  background-position: right 0.75rem center;\n  background-repeat: no-repeat;\n  background-size: 0.75rem;\n  position: relative;\n"])), inputs_js_1.styles);
-var Select = function (_a) {
-    var children = _a.children, id = _a.id, label = _a.label, options = _a.options, required = _a.required, valid = _a.valid, validMsg = _a.validMsg, props = __rest(_a, ["children", "id", "label", "options", "required", "valid", "validMsg"]);
-    var _b = react_1.useState(true), validity = _b[0], setValidity = _b[1];
-    var selectOptions = options.map(function (option, i) {
-        var key = option.value + "-" + i;
-        return <option key={key} value={option.value}>{option.label}</option>;
-    });
-    var handleCheckValidity = function (event) {
-        setValidity(event.target.checkValidity());
-    };
-    return (<field_container_1.FieldContainer fieldId={id} label={label} valid={validity} validMsg={validMsg || 'You must select an option'}>
-            <StyledSelect {...props} id={id} onBlur={function (event) { handleCheckValidity(event); }} onChange={function (event) { handleCheckValidity(event); }} required={required}>
-                {selectOptions}
-            </StyledSelect>
-        </field_container_1.FieldContainer>);
-};
-exports.Select = Select;
-var templateObject_1;
diff --git a/packages/react/src/components/forms/styles/inputs.js b/packages/react/src/components/forms/styles/inputs.js
deleted file mode 100644
index e0f7553c52..0000000000
--- a/packages/react/src/components/forms/styles/inputs.js
+++ /dev/null
@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styles = "\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(217, 221, 226);\n  border-radius: 0.25rem;\n  box-shadow: none;\n  box-sizing: border-box;\n  color: rgb(0, 0, 0);\n  font-family: inherit;\n  font-size: calc(1rem - 2px);\n  margin: 0;\n  outline: none;\n  padding: 0.5rem;\n\n  &::placeholder {\n    color: rgb(99, 114, 130);\n  }\n\n  &:disabled {\n    background-color: rgb(242, 243, 249);\n    border-color: rgb(217, 221, 226);\n\n    &,\n    &::placeholder {\n      color: rgb(156, 167, 180);\n    }\n  }\n\n  &:focus {\n    border-color: rgb(54, 71, 127);\n  }\n\n  label + & {\n    display: block;\n    margin-top: 0.5rem;\n    width: 100%;\n  }\n";
diff --git a/packages/react/src/components/headband/equisoft-default.js b/packages/react/src/components/headband/equisoft-default.js
deleted file mode 100644
index 972fa09685..0000000000
--- a/packages/react/src/components/headband/equisoft-default.js
+++ /dev/null
@@ -1,47 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var media_view_1 = require("../media-view");
-var breakpoints_1 = require("../tokens/breakpoints");
-var logo_equisoft_ico_svg_1 = __importDefault(require("../../logos/logo-equisoft-ico.svg"));
-var logo_equisoft_reversed_svg_1 = __importDefault(require("../../logos/logo-equisoft-reversed.svg"));
-var tabletMin = (breakpoints_1.breakpoints.tablet / 16) + "rem";
-var Header = styled_components_1.default.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background: rgba(1, 38, 57, 1);\n  box-sizing: border-box;\n  color: rgba(255, 255, 255);\n  display: flex;\n  justify-content: space-between;\n  min-height: 2.75rem;\n  padding: 0.75rem 1rem;\n\n  @media screen and (min-width: ", ") {\n    min-height: 5rem;\n    padding: 1.25rem 1.5rem;\n  }\n"], ["\n  align-items: center;\n  background: rgba(1, 38, 57, 1);\n  box-sizing: border-box;\n  color: rgba(255, 255, 255);\n  display: flex;\n  justify-content: space-between;\n  min-height: 2.75rem;\n  padding: 0.75rem 1rem;\n\n  @media screen and (min-width: ", ") {\n    min-height: 5rem;\n    padding: 1.25rem 1.5rem;\n  }\n"])), tabletMin);
-var Brand = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 1 1 50vw;\n\n  @media screen and (min-width: ", ") {\n    background: transparent;\n    flex: 0 1 auto;\n    justify-content: space-between;\n  }\n\n  &,\n  &:active,\n  &:visited {\n    color: inherit;\n    text-decoration: none;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 1 1 50vw;\n\n  @media screen and (min-width: ", ") {\n    background: transparent;\n    flex: 0 1 auto;\n    justify-content: space-between;\n  }\n\n  &,\n  &:active,\n  &:visited {\n    color: inherit;\n    text-decoration: none;\n  }\n"])), tabletMin);
-var Logo = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex: 1 1 50%;\n  font-size: 1.5rem;\n  font-weight: 700;\n"], ["\n  align-items: center;\n  display: flex;\n  flex: 1 1 50%;\n  font-size: 1.5rem;\n  font-weight: 700;\n"])));
-var Equisoft = styled_components_1.default(logo_equisoft_reversed_svg_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 40px;\n  width: 161px;\n"], ["\n  height: 40px;\n  width: 161px;\n"])));
-var Project = styled_components_1.default.em(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n  flex: 1 1 50%;\n  font-size: 1.25rem;\n  font-style: normal;\n  line-height: 1.5rem;\n  padding: 0 1.5rem;\n\n  @media screen and (min-width: ", ") {\n    border-left: 1px solid rgb(255, 255, 255);\n    font-size: 1rem;\n    line-height: 2.5rem;\n    margin: 0 0 0 1.5rem;\n    padding: 0 0 0 1.5rem;\n  }\n"], ["\n  display: block;\n  flex: 1 1 50%;\n  font-size: 1.25rem;\n  font-style: normal;\n  line-height: 1.5rem;\n  padding: 0 1.5rem;\n\n  @media screen and (min-width: ", ") {\n    border-left: 1px solid rgb(255, 255, 255);\n    font-size: 1rem;\n    line-height: 2.5rem;\n    margin: 0 0 0 1.5rem;\n    padding: 0 0 0 1.5rem;\n  }\n"])), tabletMin);
-function Headband(props) {
-    var children = props.children, appName = props.appName;
-    return (<Header {...props} role="banner">
-            <Brand href="/" aria-label="Home" rel="index">
-                <media_view_1.MediaView maxWidth={breakpoints_1.breakpoints.tablet}>
-                    <Logo>
-                        <logo_equisoft_ico_svg_1.default />
-                    </Logo>
-                </media_view_1.MediaView>
-
-                <media_view_1.MediaView minWidth={breakpoints_1.breakpoints.tablet}>
-                    <Logo>
-                        <Equisoft />
-                    </Logo>
-                </media_view_1.MediaView>
-
-                <Project>{appName}</Project>
-            </Brand>
-
-            <div>
-                {children}
-            </div>
-        </Header>);
-}
-exports.Headband = Headband;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
diff --git a/packages/react/src/components/media-view.js b/packages/react/src/components/media-view.js
deleted file mode 100644
index f72d746aa1..0000000000
--- a/packages/react/src/components/media-view.js
+++ /dev/null
@@ -1,61 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var MediaView = /** @class */ (function (_super) {
-    __extends(MediaView, _super);
-    function MediaView(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            screenWidth: (window.innerWidth || document.documentElement.clientWidth),
-        };
-        _this.handleScreeResize = _this.handleScreeResize.bind(_this);
-        return _this;
-    }
-    MediaView.prototype.componentDidMount = function () {
-        window.addEventListener('resize', this.handleScreeResize);
-    };
-    MediaView.prototype.componentWillUnmount = function () {
-        window.addEventListener('resize', this.handleScreeResize);
-    };
-    MediaView.prototype.handleScreeResize = function () {
-        this.setState({ screenWidth: (window.innerWidth || document.documentElement.clientWidth) });
-    };
-    MediaView.prototype.render = function () {
-        var _a = this.props, children = _a.children, maxWidth = _a.maxWidth, minWidth = _a.minWidth;
-        var screenWidth = this.state.screenWidth;
-        var isMinDisplay = false;
-        var isMaxDisplay = false;
-        if (minWidth !== undefined) {
-            isMinDisplay = (screenWidth >= minWidth);
-        }
-        if (maxWidth !== undefined) {
-            isMaxDisplay = (screenWidth < maxWidth);
-        }
-        if (isMinDisplay || isMaxDisplay) {
-            return <>{children}</>;
-        }
-        return null;
-    };
-    return MediaView;
-}(react_1.Component));
-exports.MediaView = MediaView;
diff --git a/packages/react/src/components/progress.js b/packages/react/src/components/progress.js
deleted file mode 100644
index de304e02d8..0000000000
--- a/packages/react/src/components/progress.js
+++ /dev/null
@@ -1,47 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var range_1 = __importDefault(require("lodash-es/range"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Div = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  max-width: 160px;\n"], ["\n  align-items: center;\n  display: flex;\n  max-width: 160px;\n"])));
-var StyledProgress = styled_components_1.default.progress(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  appearance: none;\n  height: 4px;\n  margin: 6px;\n  min-width: 148px;\n\n  &[value] {\n    &::-moz-progress-bar {\n      background-color: #36477f;\n    }\n\n    &::-webkit-progress-bar {\n      background-color: #d9dde2;\n    }\n\n    &::-webkit-progress-value {\n      background-color: #36477f;\n    }\n  }\n"], ["\n  appearance: none;\n  height: 4px;\n  margin: 6px;\n  min-width: 148px;\n\n  &[value] {\n    &::-moz-progress-bar {\n      background-color: #36477f;\n    }\n\n    &::-webkit-progress-bar {\n      background-color: #d9dde2;\n    }\n\n    &::-webkit-progress-value {\n      background-color: #36477f;\n    }\n  }\n"])));
-var UL = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  height: 16px;\n  justify-content: space-between;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  width: 160px;\n"], ["\n  display: flex;\n  height: 16px;\n  justify-content: space-between;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  width: 160px;\n"])));
-var AbstractStep = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: #36477f;\n  border-radius: 50%;\n  display: inline-block;\n  width: 16px;\n"], ["\n  background-color: #36477f;\n  border-radius: 50%;\n  display: inline-block;\n  width: 16px;\n"])));
-var PastStep = AbstractStep;
-var CurrentStep = styled_components_1.default(AbstractStep)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: 4px solid #d9dde2;\n  width: 8px;\n"], ["\n  border: 4px solid #d9dde2;\n  width: 8px;\n"])));
-var FutureStep = styled_components_1.default(AbstractStep)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: #d9dde2;\n"], ["\n  background-color: #d9dde2;\n"])));
-var getStep = function (_a) {
-    var step = _a.step, max = _a.max, value = _a.value;
-    var StepComponent;
-    if (step < value) {
-        StepComponent = PastStep;
-    }
-    else if (step === value) {
-        StepComponent = CurrentStep;
-        if (step === max) {
-            StepComponent = PastStep;
-        }
-    }
-    else {
-        StepComponent = FutureStep;
-    }
-    return <StepComponent key={step}/>;
-};
-var Progress = function (_a) {
-    var max = _a.max, value = _a.value;
-    return (<Div>
-        <StyledProgress max={max} value={value}/>
-        <UL>
-            {range_1.default(max + 1).map(function (step) { return getStep({ step: step, max: max, value: value }); })}
-        </UL>
-    </Div>);
-};
-exports.Progress = Progress;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
diff --git a/packages/react/src/components/results/legend.jsx b/packages/react/src/components/results/legend.tsx
similarity index 81%
rename from packages/react/src/components/results/legend.jsx
rename to packages/react/src/components/results/legend.tsx
index 0be812b45e..f2cfc1edee 100644
--- a/packages/react/src/components/results/legend.jsx
+++ b/packages/react/src/components/results/legend.tsx
@@ -32,9 +32,15 @@ const Description = styled.span`
   font-size: 0.75rem;
 `;
 
-const Legend = ({ items }) => (
+interface ItemProps {
+    name: string;
+    description: string;
+    color?: string;
+}
+
+const Legend = ({ items }: any) => (
     <List>
-        {items.map(item => (
+        {items.map((item: ItemProps) => (
             <Item color={item.color}>
                 <div>
                     <p>{item.name}</p>
@@ -45,4 +51,4 @@ const Legend = ({ items }) => (
     </List>
 );
 
-export default Legend;
+export { Legend };
diff --git a/packages/react/src/components/results/progress-bar/bar/bar.jsx b/packages/react/src/components/results/progress-bar/bar/bar.tsx
similarity index 54%
rename from packages/react/src/components/results/progress-bar/bar/bar.jsx
rename to packages/react/src/components/results/progress-bar/bar/bar.tsx
index 169932425e..fd547657d6 100644
--- a/packages/react/src/components/results/progress-bar/bar/bar.jsx
+++ b/packages/react/src/components/results/progress-bar/bar/bar.tsx
@@ -6,7 +6,7 @@ const Container = styled.div `
   display: flex;
   margin-bottom: 1rem;
   p {
-    color: ${props => (props.secondary ? 'rgb(87, 102, 110)' : 'rgb(0, 0, 0)')};
+    color: ${(props: {secondary: boolean}) => (props.secondary ? 'rgb(87, 102, 110)' : 'rgb(0, 0, 0)')};
     margin: 0;
     text-align: right;
     width: 8.5rem;
@@ -20,20 +20,27 @@ const Progress = styled.div `
   width: 100%;
 `;
 
-const Bar = styled.div `
+const StyledBar = styled.div `
   background: ${props => props.color};
   border-radius: 4rem;
   height: 0.55rem;
-  width: ${props => Math.min(Math.max(props.percent, 0), 100)}%;
+  width: ${(props: {percent: string}) => Math.min(Math.max(parseInt(props.percent, 10), 0), 100)}%;
 `;
 
-const bar = ({ color, percent, endLabel, secondary }) => (
+interface BarProps {
+    color: string;
+    percent: string;
+    endLabel: string;
+    secondary: boolean;
+}
+
+const Bar = ({ color, percent, endLabel, secondary }: BarProps) => (
     <Container secondary={secondary}>
         <Progress>
-            <Bar color={color} percent={percent} />
+            <StyledBar color={color} percent={percent} />
         </Progress>
         <p>{endLabel}</p>
     </Container>
 );
 
-export default bar;
+export { Bar };
diff --git a/packages/react/src/components/results/progress-bar/progress-bar.jsx b/packages/react/src/components/results/progress-bar/progress-bar.tsx
similarity index 56%
rename from packages/react/src/components/results/progress-bar/progress-bar.jsx
rename to packages/react/src/components/results/progress-bar/progress-bar.tsx
index 052c062c04..ee98a5f7e8 100644
--- a/packages/react/src/components/results/progress-bar/progress-bar.jsx
+++ b/packages/react/src/components/results/progress-bar/progress-bar.tsx
@@ -1,16 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Bar from './bar/bar';
+import { Bar } from './bar/bar';
 
 const Label = styled.label`
-  color: ${props => (props.secondary ? 'rgb(87, 102, 110)' : 'rgb(0, 0, 0)')};
+  color: ${(props: {secondary: boolean}) => (props.secondary ? 'rgb(87, 102, 110)' : 'rgb(0, 0, 0)')};
   font-size: 0.875rem;
 `;
 
-const ProgressBar = ({ content }) => (
+interface ElProps {
+    color: string;
+    descriptionLabel: string;
+    endLabel: string;
+    percent: string;
+    secondary: boolean;
+}
+
+const ProgressBar = ({ content }: any) => (
     <React.Fragment>
-        {content.map(el => (
+        {content.map((el: ElProps) => (
             <div>
                 <Label secondary={el.secondary}>{el.descriptionLabel}</Label>
                 <Bar
@@ -24,4 +32,4 @@ const ProgressBar = ({ content }) => (
     </React.Fragment>
 );
 
-export default ProgressBar;
+export { ProgressBar };
diff --git a/packages/react/src/components/results/progress-circle/circle/circle.jsx b/packages/react/src/components/results/progress-circle/circle/circle.tsx
similarity index 87%
rename from packages/react/src/components/results/progress-circle/circle/circle.jsx
rename to packages/react/src/components/results/progress-circle/circle/circle.tsx
index b7d6e1f3ad..c2cd560a18 100644
--- a/packages/react/src/components/results/progress-circle/circle/circle.jsx
+++ b/packages/react/src/components/results/progress-circle/circle/circle.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Circle = ({ radius, stroke, percent, color }) => {
+interface CircleProps {
+    radius: number;
+    stroke: number;
+    percent: number;
+    color: string;
+}
+
+const Circle = ({ radius, stroke, percent, color }: CircleProps) => {
     const normalizedRadius = radius - (stroke * 2);
     const circumference = normalizedRadius * 2 * Math.PI;
-    const placeholderDashoffset = circumference - (1 * circumference);
     const strokeDashoffset = circumference - ((percent / 100) * circumference);
 
     const CirclePath = styled.circle`
@@ -19,7 +25,6 @@ const Circle = ({ radius, stroke, percent, color }) => {
                 fill="transparent"
                 strokeWidth={stroke}
                 strokeDasharray={`${circumference} ${circumference}`}
-                style={{ placeholderDashoffset }}
                 strokeLinecap="round"
                 r={normalizedRadius}
                 cx={radius}
diff --git a/packages/react/src/components/results/progress-circle/progress-circle.jsx b/packages/react/src/components/results/progress-circle/progress-circle.tsx
similarity index 82%
rename from packages/react/src/components/results/progress-circle/progress-circle.jsx
rename to packages/react/src/components/results/progress-circle/progress-circle.tsx
index 25bbbc5be3..cee092d400 100644
--- a/packages/react/src/components/results/progress-circle/progress-circle.jsx
+++ b/packages/react/src/components/results/progress-circle/progress-circle.tsx
@@ -3,8 +3,16 @@ import styled from 'styled-components';
 
 import { Circle } from './circle/circle';
 
+interface ProgressCircleProps {
+    percent: number;
+    color: string;
+    descriptionLabel: string;
+    resultLabel: string;
+    secondary: boolean;
+}
+
 // Source: https://css-tricks.com/building-progress-ring-quickly/
-const ProgressCircle = ({ color, descriptionLabel, percent, resultLabel, secondary }) => {
+const ProgressCircle = ({ color, descriptionLabel, percent, resultLabel, secondary }: ProgressCircleProps) => {
     const radius = 73;
     const stroke = 8;
 
@@ -51,13 +59,13 @@ const ProgressCircle = ({ color, descriptionLabel, percent, resultLabel, seconda
                     percent={percent}
                     color={color}
                 />
-                <Result secondary={secondary}>
+                <Result>
                     <p>{resultLabel}</p>
                 </Result>
             </Wrapper>
-            <Label secondary={secondary}>{descriptionLabel}</Label>
+            <Label>{descriptionLabel}</Label>
         </Container>
     );
 };
 
-export default ProgressCircle;
+export { ProgressCircle };
diff --git a/packages/react/src/components/tokens/breakpoints.js b/packages/react/src/components/tokens/breakpoints.js
deleted file mode 100644
index bec867cd43..0000000000
--- a/packages/react/src/components/tokens/breakpoints.js
+++ /dev/null
@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.breakpoints = {
-    tablet: 768,
-};
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
deleted file mode 100644
index d02eb153aa..0000000000
--- a/packages/react/src/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-// Buttons
-var add_button_1 = require("./components/buttons/add-button");
-exports.AddButton = add_button_1.AddButton;
-var button_1 = require("./components/buttons/button");
-exports.Button = button_1.Button;
-// Icons
-var checkmark_svg_1 = __importDefault(require("./icons/checkmark.svg"));
-exports.CheckmarkIcon = checkmark_svg_1.default;
-var no_contact_svg_1 = __importDefault(require("./icons/no-contact.svg"));
-exports.NoContactIcon = no_contact_svg_1.default;
-// Form Elements
-var checkbox_1 = require("./components/forms/inputs/checkbox");
-exports.Checkbox = checkbox_1.Checkbox;
-var option_button_1 = require("./components/forms/inputs/option-button");
-exports.OptionButton = option_button_1.OptionButton;
-var search_contextual_1 = require("./components/forms/inputs/search-contextual");
-exports.SearchContextual = search_contextual_1.SearchContextual;
-var search_global_1 = require("./components/forms/inputs/search-global");
-exports.SearchGlobal = search_global_1.SearchGlobal;
-var text_area_1 = require("./components/forms/inputs/text-area");
-exports.TextArea = text_area_1.TextArea;
-var text_input_1 = require("./components/forms/inputs/text-input");
-exports.TextInput = text_input_1.TextInput;
-var Select_1 = require("./components/forms/selects/Select");
-exports.Select = Select_1.Select;
-// Miscellaneous
-var card_1 = require("./components/card");
-exports.Card = card_1.Card;
-var enso_spinner_1 = require("./components/enso-spinner");
-exports.EnsoSpinner = enso_spinner_1.EnsoSpinner;
-var equisoft_default_1 = require("./components/headband/equisoft-default");
-exports.Headband = equisoft_default_1.Headband;
-var progress_1 = require("./components/progress");
-exports.Progress = progress_1.Progress;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 2e1a0de0f9..5f2172ccfa 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -23,9 +23,9 @@ import { Headband } from './components/headband/equisoft-default';
 import { Progress } from './components/progress';
 
 // Results
-import Legend from './components/results/legend';
-import ProgressBar from './components/results/progress-bar/progress-bar';
-import ProgressCircle from './components/results/progress-circle/progress-circle';
+import { Legend } from './components/results/legend';
+import { ProgressBar } from './components/results/progress-bar/progress-bar';
+import { ProgressCircle } from './components/results/progress-circle/progress-circle';
 
 export {
     AddButton,
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index c6c35dd1c3..1ec48afd3a 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -9,7 +9,8 @@
         "noEmitOnError": true,
         "sourceMap": true,
         "baseUrl": "./src/",
-        "paths": {}
+        "paths": {},
+        "outDir": "./dist"
     },
     "include": [
         "src/**/*"