diff --git a/dist/CommonStyles.d.ts b/dist/CommonStyles.d.ts
index 4b9875825..ef2269f13 100644
--- a/dist/CommonStyles.d.ts
+++ b/dist/CommonStyles.d.ts
@@ -1,4 +1,4 @@
-import { SimpleInterpolation, Styles } from 'styled-components';
+import { SimpleInterpolation } from 'styled-components';
 import { PopOverPosition } from '@monorail/popOver/PopOver';
 declare enum AuthSubAppName {
     Academy = "academy",
@@ -8,9 +8,13 @@ declare enum AuthSubAppName {
     Hardhat = "hardhat",
     Range = "range",
     TechOps = "techops",
-    Tracker = "tracker"
+    Tracker = "tracker",
+    Execution = "execution",
+    Home = "home",
+    Events = "events",
+    EventDesign = "event-design"
 }
-export declare const visible: (isVisible?: boolean) => Styles;
+export declare const visible: (isVisible?: boolean) => import("styled-components").FlattenSimpleInterpolation;
 export declare enum ElevationRange {
     Elevation0 = "elevation0",
     Elevation1 = "elevation1",
@@ -38,9 +42,9 @@ export declare enum ElevationRange {
     Elevation23 = "elevation23",
     Elevation24 = "elevation24"
 }
-export declare const getElevation: (elevation: ElevationRange) => Styles;
-export declare const flexFlow: (direction?: string, wrap?: string) => Styles;
-export declare const ellipsis: import("styled-components").InterpolationValue[];
+export declare const getElevation: (elevation: ElevationRange) => import("styled-components").FlattenSimpleInterpolation;
+export declare const flexFlow: (direction?: string, wrap?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const ellipsis: import("styled-components").FlattenSimpleInterpolation;
 export declare enum FontWeights {
     ExtraLight = 200,
     Light = 300,
@@ -62,7 +66,106 @@ export declare enum FontSizes {
     Content = "content",
     Micro = "micro"
 }
-export declare const typography: (weight: number, size: FontSizes, margin?: string | undefined) => Styles;
+export declare const typography: (weight: number, size: FontSizes, margin?: string | undefined) => {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    margin: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+} | {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+};
 export declare type Margin = {
     bottom?: number | 'auto';
     left?: number | 'auto';
@@ -73,7 +176,7 @@ export declare const typographyMargin: (size: FontSizes, margin?: string) => {
     margin: string;
 };
 export declare const shortHandDeconstruction: (value: string) => Margin;
-export declare const gothamFontFamily: import("styled-components").InterpolationValue[];
+export declare const gothamFontFamily: import("styled-components").FlattenSimpleInterpolation;
 /**
  * App Name
  */
@@ -87,7 +190,11 @@ export declare enum AppName {
     Repo = "repo",
     TechOps = "techops",
     Tracker = "tracker",
-    Training = "training"
+    Training = "training",
+    Execution = "execution",
+    Home = "home",
+    Events = "events",
+    EventDesign = "event-design"
 }
 export declare enum EventState {
     Active = "active",
@@ -128,6 +235,7 @@ export declare enum Colors {
     Requested = "requested",
     Inactive = "inactive",
     Academy = "academy",
+    Execution = "execution",
     Admin = "admin",
     Catalog = "catalog",
     Dashboard = "dashboard",
@@ -144,10 +252,11 @@ export declare enum Colors {
     Amber = "amber"
 }
 export declare type AppOrAuthSubAppName = AppName | AuthSubAppName;
-export declare type AppOrAuthSubAppNameString = 'admin' | 'academy' | 'catalog' | 'dashboard' | 'range' | 'tracker' | 'hardhat' | 'impact' | 'training' | 'techops' | 'repo' | 'externalLms';
+export declare type AppOrAuthSubAppNameString = 'admin' | 'academy' | 'catalog' | 'dashboard' | 'range' | 'tracker' | 'hardhat' | 'impact' | 'training' | 'techops' | 'repo' | 'externalLms' | 'execution' | 'home' | 'events' | 'event-design';
 export declare const convertAppNameToColor: (appNames: AppOrAuthSubAppName) => Colors;
 export declare const convertStringToAppName: (appNameString: string) => AppOrAuthSubAppName;
 export declare const convertAppNameToString: (appName: AppOrAuthSubAppName) => AppOrAuthSubAppNameString;
+export declare const isAppName: (name: string) => name is AppName;
 export declare const convertEventStateToColor: (eventState: EventState) => Colors;
 declare type HSLAMapType = {
     h: number;
@@ -162,11 +271,11 @@ export declare const colorHSLAMap: ({ color, alpha, }: {
 export declare const convertHSLAMapToCss: (HSLAMap: HSLAMapType) => string;
 export declare const colors: (color: Colors, alpha?: number) => string;
 export declare const baseFocusStyles: (addPositionToParent?: boolean) => SimpleInterpolation;
-export declare const baseOutlineStyles: (color?: Colors) => import("styled-components").InterpolationValue[];
-export declare const baseChromelessStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").InterpolationValue[];
-export declare const baseSecondaryStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").InterpolationValue[];
-export declare const basePrimaryStyles: (color?: Colors) => import("styled-components").InterpolationValue[];
-export declare const baseDisabledStyles: import("styled-components").InterpolationValue[];
+export declare const baseOutlineStyles: (color?: Colors) => import("styled-components").FlattenSimpleInterpolation;
+export declare const baseChromelessStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").FlattenSimpleInterpolation;
+export declare const baseSecondaryStyles: (color?: Colors, isActive?: boolean | undefined) => import("styled-components").FlattenSimpleInterpolation;
+export declare const basePrimaryStyles: (color?: Colors) => import("styled-components").FlattenSimpleInterpolation;
+export declare const baseDisabledStyles: import("styled-components").FlattenSimpleInterpolation;
 export declare enum BorderRadius {
     Small = 3,
     Medium = 4,
@@ -174,7 +283,7 @@ export declare enum BorderRadius {
     XLarge = 8,
     Round = 1000
 }
-export declare const borderRadius: (borderRadius2?: BorderRadius) => import("styled-components").InterpolationValue[];
+export declare const borderRadius: (borderRadius2?: BorderRadius) => import("styled-components").FlattenSimpleInterpolation;
 export declare const generateScaleAnimation: (params: {
     position: PopOverPosition;
     isOpen: boolean;
@@ -185,7 +294,7 @@ export declare const generateScaleAnimation: (params: {
     inSideContentStyles: SimpleInterpolation;
 };
 export declare const ease: (isActive: boolean) => "ease-in" | "ease-out";
-export declare const buttonTransition: import("styled-components").InterpolationValue[];
+export declare const buttonTransition: import("styled-components").FlattenSimpleInterpolation;
 export declare const transition: (props: {
     properties?: Array<string>;
     easing: string;
diff --git a/dist/CommonStyles.js b/dist/CommonStyles.js
index 391f357db..9e771feaf 100644
--- a/dist/CommonStyles.js
+++ b/dist/CommonStyles.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Sizes = exports.sizes = exports.transition = exports.buttonTransition = exports.ease = exports.generateScaleAnimation = exports.borderRadius = exports.BorderRadius = exports.baseDisabledStyles = exports.basePrimaryStyles = exports.baseSecondaryStyles = exports.baseChromelessStyles = exports.baseOutlineStyles = exports.baseFocusStyles = exports.colors = exports.convertHSLAMapToCss = exports.colorHSLAMap = exports.convertEventStateToColor = exports.convertAppNameToString = exports.convertStringToAppName = exports.convertAppNameToColor = exports.Colors = exports.EventState = exports.AppName = exports.gothamFontFamily = exports.shortHandDeconstruction = exports.typographyMargin = exports.typography = exports.FontSizes = exports.FontWeights = exports.ellipsis = exports.flexFlow = exports.getElevation = exports.ElevationRange = exports.visible = void 0;
+exports.Sizes = exports.sizes = exports.transition = exports.buttonTransition = exports.ease = exports.generateScaleAnimation = exports.borderRadius = exports.BorderRadius = exports.baseDisabledStyles = exports.basePrimaryStyles = exports.baseSecondaryStyles = exports.baseChromelessStyles = exports.baseOutlineStyles = exports.baseFocusStyles = exports.colors = exports.convertHSLAMapToCss = exports.colorHSLAMap = exports.convertEventStateToColor = exports.isAppName = exports.convertAppNameToString = exports.convertStringToAppName = exports.convertAppNameToColor = exports.Colors = exports.EventState = exports.AppName = exports.gothamFontFamily = exports.shortHandDeconstruction = exports.typographyMargin = exports.typography = exports.FontSizes = exports.FontWeights = exports.ellipsis = exports.flexFlow = exports.getElevation = exports.ElevationRange = exports.visible = void 0;
 
 var _styledComponents = require("styled-components");
 
@@ -18,20 +18,17 @@ var AuthSubAppName;
   AuthSubAppName["Range"] = "range";
   AuthSubAppName["TechOps"] = "techops";
   AuthSubAppName["Tracker"] = "tracker";
+  AuthSubAppName["Execution"] = "execution";
+  AuthSubAppName["Home"] = "home";
+  AuthSubAppName["Events"] = "events";
+  AuthSubAppName["EventDesign"] = "event-design";
 })(AuthSubAppName || (AuthSubAppName = {}));
 
-const visible = (isVisible = false) => isVisible ? {
-  visibility: 'visible',
-  opacity: 0.9999 // Doing .9999 keeps the GPU activated on this element so that it can quickly change back to 0.
-
-} : {
-  visibility: 'hidden',
-  opacity: 0
-  /*
-  * Elevation
-  */
+const visible = (isVisible = false) => isVisible ? (0, _styledComponents.css)(["visibility:visible;opacity:0.9999;"]) : (0, _styledComponents.css)(["visibility:hidden;opacity:0;"]);
+/*
+* Elevation
+*/
 
-};
 
 exports.visible = visible;
 let ElevationRange;
@@ -93,9 +90,7 @@ const elevationStyles = {
   [ElevationRange.Elevation24]: '0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)'
 };
 
-const getElevation = elevation => ({
-  boxShadow: elevationStyles[elevation]
-});
+const getElevation = elevation => (0, _styledComponents.css)(["box-shadow:", ";"], elevationStyles[elevation]);
 /*
 * Flex Helpers
 */
@@ -105,10 +100,7 @@ exports.getElevation = getElevation;
 const defaultDirection = 'column';
 const defaultWrap = 'nowrap';
 
-const flexFlow = (direction = defaultDirection, wrap = defaultWrap) => ({
-  display: 'flex',
-  flexFlow: `${direction} ${wrap}`
-});
+const flexFlow = (direction = defaultDirection, wrap = defaultWrap) => (0, _styledComponents.css)(["display:flex;flex-flow:", " ", ";"], direction, wrap);
 /*
 * Typography
 */
@@ -366,6 +358,10 @@ exports.AppName = AppName;
   AppName["TechOps"] = "techops";
   AppName["Tracker"] = "tracker";
   AppName["Training"] = "training";
+  AppName["Execution"] = "execution";
+  AppName["Home"] = "home";
+  AppName["Events"] = "events";
+  AppName["EventDesign"] = "event-design";
 })(AppName || (exports.AppName = AppName = {}));
 
 let EventState;
@@ -414,6 +410,7 @@ exports.Colors = Colors;
   Colors["Requested"] = "requested";
   Colors["Inactive"] = "inactive";
   Colors["Academy"] = "academy";
+  Colors["Execution"] = "execution";
   Colors["Admin"] = "admin";
   Colors["Catalog"] = "catalog";
   Colors["Dashboard"] = "dashboard";
@@ -450,6 +447,16 @@ const convertAppNameToColor = appNames => {
     case AuthSubAppName.Dashboard:
       return Colors.Dashboard;
 
+    case AppName.Home:
+    case AuthSubAppName.Home:
+    case AppName.Events:
+    case AuthSubAppName.Events:
+    case AppName.EventDesign:
+    case AuthSubAppName.EventDesign:
+    case AuthSubAppName.Execution:
+    case AppName.Execution:
+      return Colors.White;
+
     case AppName.Range:
     case AuthSubAppName.Range:
       return Colors.Range;
@@ -521,6 +528,18 @@ const convertStringToAppName = appNameString => {
     case 'externalLms':
       return AppName.LMS;
 
+    case 'execution':
+      return AppName.Execution;
+
+    case 'home':
+      return AppName.Home;
+
+    case 'events':
+      return AppName.Events;
+
+    case 'event-design':
+      return AppName.EventDesign;
+
     default:
       return assertUnreachable('Invalid appName');
   }
@@ -571,11 +590,29 @@ const convertAppNameToString = appName => {
 
     case AppName.LMS:
       return 'externalLms';
+
+    case AppName.Home:
+    case AuthSubAppName.Home:
+      return 'home';
+
+    case AppName.Events:
+    case AuthSubAppName.Events:
+    case AppName.Execution:
+    case AuthSubAppName.Execution:
+      return 'events';
+
+    case AppName.EventDesign:
+    case AuthSubAppName.EventDesign:
+      return 'event-design';
   }
 };
 
 exports.convertAppNameToString = convertAppNameToString;
 
+const isAppName = name => Object.values(AppName).includes(name);
+
+exports.isAppName = isAppName;
+
 const convertEventStateToColor = eventState => {
   switch (eventState) {
     case EventState.Active:
@@ -822,6 +859,12 @@ const colorHSLAMap = ({
       l: 50,
       a: alpha
     },
+    [Colors.Execution]: {
+      h: 196,
+      s: 75,
+      l: 50,
+      a: alpha
+    },
     // Event Status
     // In Progress
     [Colors.Active]: {
@@ -1092,7 +1135,7 @@ const sizes = {
     width: 176
   },
   appSwitcher: {
-    width: 368
+    width: 376
   }
 };
 exports.sizes = sizes;
diff --git a/dist/CoreUtils/Either.d.ts b/dist/CoreUtils/Either.d.ts
deleted file mode 100644
index cdda79db4..000000000
--- a/dist/CoreUtils/Either.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Either } from 'fp-ts/lib/Either';
-/**
- * Standalone version of fp-ts' `fold` for Eithers
- */
-export declare const fold: <B, L, A>(x: Either<L, A>, whenLeft: (l: L) => B, whenRight: (a: A) => B) => B;
diff --git a/dist/CoreUtils/Number.d.ts b/dist/CoreUtils/Number.d.ts
deleted file mode 100644
index a78214377..000000000
--- a/dist/CoreUtils/Number.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Ord } from 'fp-ts/lib/Ord';
-import { Ordering } from 'fp-ts/lib/Ordering';
-/**
- * Determines ordering of two strings (numeric comparison)
- */
-export declare const numericCompare: (x: number, y: number) => Ordering;
-/**
- * Ord instance for number
- */
-export declare const ordNumeric: Ord<number>;
diff --git a/dist/CoreUtils/Number.js b/dist/CoreUtils/Number.js
deleted file mode 100644
index aa5c8ae6f..000000000
--- a/dist/CoreUtils/Number.js
+++ /dev/null
@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ordNumeric = exports.numericCompare = void 0;
-
-var _Setoid = require("./Setoid");
-
-/**
- * Determines ordering of two strings (numeric comparison)
- */
-const numericCompare = (x, y) => x < y ? -1 : x > y ? 1 : 0;
-/**
- * Ord instance for number
- */
-
-
-exports.numericCompare = numericCompare;
-const ordNumeric = { ..._Setoid.setoidStrict,
-  compare: numericCompare
-};
-exports.ordNumeric = ordNumeric;
\ No newline at end of file
diff --git a/dist/CoreUtils/Record.d.ts b/dist/CoreUtils/Record.d.ts
deleted file mode 100644
index 15b4f566f..000000000
--- a/dist/CoreUtils/Record.d.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Option } from 'fp-ts/lib/Option';
-import { Ord } from 'fp-ts/lib/Ord';
-import { Ordering } from 'fp-ts/lib/Ordering';
-import { Setoid } from 'fp-ts/lib/Setoid';
-import { SafePrimitive } from './type-level';
-/**
- * Retrieves the keys of an object while retaining keyof type information
- */
-export declare const keys: <A extends {
-    [key: string]: unknown;
-}, K extends keyof A & string>(x: A) => K[];
-/**
- * Retrieves the values of an object while retaining type information
- */
-export declare const values: <A extends {
-    [key: string]: unknown;
-}, K extends keyof A & string>(x: A) => A[K][];
-/**
- * Retrieves the value of a given property key from an object (curried)
- */
-export declare const prop: <A extends object, Key extends keyof A>(k: Key) => (obj: A) => A[Key];
-/**
- * Retrieves the value of a given property key from an object (uncurried)
- */
-export declare const prop_: <A extends object, Key extends keyof A>(k: Key, obj: A) => A[Key];
-/**
- * General lookup function that retrieves the value associated with a given
- * property key in an object, returning an option. Returns a None if the key
- * is missing from the object OR if the key exists but the value is null or
- * undefined
- */
-export declare const lookup: <A extends Record<string | number | symbol, unknown>, B extends keyof A>(key: B, fa: A) => Option<A[B]>;
-/**
- * Omits the key-value pairs from an object associated with the provided keys
- */
-export declare const omit: <A extends {
-    [key: string]: unknown;
-}, K extends keyof A>(rec: A, ks: K[]) => { [P in Exclude<keyof A, K>]: A[P]; };
-/**
- * Picks the key-value pairs from an object associated with the provided keys
- */
-export declare const pick: <A extends {
-    [key: string]: unknown;
-}, K extends keyof A & string>(rec: A, ks: K[]) => { [P in K]: A[P]; };
-export declare const sequenceMixedRecordOptions: <A extends {
-    [key: string]: Option<SafePrimitive>;
-}, B extends { [P in keyof A & string]: import("./type-level").ExtractFromHKT1<A[P]>; }>(rec: A) => Option<B>;
-export declare const traverseMixedRecordOptions: <A extends {
-    [key: string]: SafePrimitive;
-}, B extends { [P in keyof A]: A[P]; }, F extends (x: B[keyof B]) => Option<unknown>>(rec: A, f: F) => Option<{ [P in keyof B & string]: import("./type-level").ExtractFromHKT1<ReturnType<F>>; }>;
-/**
- * Interface for records extending a { name: string } key-val pair
- */
-export interface RecordWithName {
-    name: string;
-}
-/**
- * Equality checker for RecordWithName, comparing lowercase names
- */
-export declare const recordWithNameLowerEquality: <A extends RecordWithName>(a: A, b: A) => boolean;
-/**
- * Comparator for RecordWithName, comparing lowercase names alphabetically
- */
-export declare const recordWithNameLowerComparator: <A extends RecordWithName>(a: A, b: A) => Ordering;
-export declare const setoidRecordWithNameLower: Setoid<RecordWithName>;
-/**
- * Ord instance for types extending the RecordWithName interface
- * that does comparisons & equality checking against the name prop
- * converted to lowercase
- */
-export declare const ordRecordWithNameLower: Ord<RecordWithName>;
-export declare const sortRecords: <S extends Record<K, A>, K extends keyof S & string, A extends S[K]>(ord: Ord<S>) => (data: S[]) => S[];
diff --git a/dist/CoreUtils/Record.js b/dist/CoreUtils/Record.js
deleted file mode 100644
index 07386d14a..000000000
--- a/dist/CoreUtils/Record.js
+++ /dev/null
@@ -1,162 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sortRecords = exports.ordRecordWithNameLower = exports.setoidRecordWithNameLower = exports.recordWithNameLowerComparator = exports.recordWithNameLowerEquality = exports.traverseMixedRecordOptions = exports.sequenceMixedRecordOptions = exports.pick = exports.omit = exports.lookup = exports.prop_ = exports.prop = exports.values = exports.keys = void 0;
-
-var _Option = require("fp-ts/lib/Option");
-
-var record = _interopRequireWildcard(require("fp-ts/lib/Record"));
-
-var _Array = require("fp-ts/lib/Array");
-
-var _Array2 = require("./Array");
-
-var _String = require("./String");
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
-/**
- * Retrieves the keys of an object while retaining keyof type information
- */
-const keys = x => Object.keys(x);
-/**
- * Retrieves the values of an object while retaining type information
- */
-
-
-exports.keys = keys;
-
-const values = x => Object.values(x);
-/**
- * Retrieves the value of a given property key from an object (curried)
- */
-
-
-exports.values = values;
-
-const prop = k => obj => obj[k];
-/**
- * Retrieves the value of a given property key from an object (uncurried)
- */
-
-
-exports.prop = prop;
-
-const prop_ = (k, obj) => obj[k];
-/**
- * General lookup function that retrieves the value associated with a given
- * property key in an object, returning an option. Returns a None if the key
- * is missing from the object OR if the key exists but the value is null or
- * undefined
- */
-
-
-exports.prop_ = prop_;
-
-const lookup = (key, fa) => fa.hasOwnProperty(key) ? (0, _Option.fromNullable)(fa[key]) : _Option.none;
-/**
- * Omits the key-value pairs from an object associated with the provided keys
- */
-
-
-exports.lookup = lookup;
-
-const omit = (rec, ks) => {
-  const { ...result
-  } = rec;
-  (0, _Array2.forEach)(ks, k => delete result[k]);
-  return result;
-};
-/**
- * Picks the key-value pairs from an object associated with the provided keys
- */
-
-
-exports.omit = omit;
-
-const pick = (rec, ks) => {
-  const result = {};
-  (0, _Array2.forEach)(ks, k => {
-    result[k] = rec[k];
-  });
-  return result;
-};
-
-exports.pick = pick;
-
-const sequenceMixedRecordOptions = rec => {
-  const result = {};
-
-  for (const [k, opt] of record.toArray(rec)) {
-    if ((0, _Option.isNone)(opt)) {
-      return _Option.none;
-    } else {
-      result[k] = opt.value;
-    }
-  }
-
-  return (0, _Option.some)(result);
-};
-
-exports.sequenceMixedRecordOptions = sequenceMixedRecordOptions;
-
-const traverseMixedRecordOptions = (rec, f) => {
-  const result = {};
-
-  for (const [k, val] of record.toArray(rec)) {
-    const opt = f(val);
-
-    if ((0, _Option.isNone)(opt)) {
-      return _Option.none;
-    } else {
-      result[k] = opt.value;
-    }
-  }
-
-  return (0, _Option.some)(result);
-};
-/**
- * Interface for records extending a { name: string } key-val pair
- */
-
-
-exports.traverseMixedRecordOptions = traverseMixedRecordOptions;
-
-/**
- * Equality checker for RecordWithName, comparing lowercase names
- */
-const recordWithNameLowerEquality = (a, b) => (0, _String.toLower)(a.name) === (0, _String.toLower)(b.name);
-/**
- * Comparator for RecordWithName, comparing lowercase names alphabetically
- */
-
-
-exports.recordWithNameLowerEquality = recordWithNameLowerEquality;
-
-const recordWithNameLowerComparator = (a, b) => {
-  const nameA = (0, _String.toLower)(a.name);
-  const nameB = (0, _String.toLower)(b.name);
-  return nameA < nameB ? -1 : nameA > nameB ? 1 : 0;
-};
-
-exports.recordWithNameLowerComparator = recordWithNameLowerComparator;
-const setoidRecordWithNameLower = {
-  equals: recordWithNameLowerEquality
-  /**
-   * Ord instance for types extending the RecordWithName interface
-   * that does comparisons & equality checking against the name prop
-   * converted to lowercase
-   */
-
-};
-exports.setoidRecordWithNameLower = setoidRecordWithNameLower;
-const ordRecordWithNameLower = { ...setoidRecordWithNameLower,
-  compare: recordWithNameLowerComparator
-};
-exports.ordRecordWithNameLower = ordRecordWithNameLower;
-
-const sortRecords = ord => data => (0, _Array.sort)(ord)(data);
-
-exports.sortRecords = sortRecords;
\ No newline at end of file
diff --git a/dist/CoreUtils/Setoid.js b/dist/CoreUtils/Setoid.js
deleted file mode 100644
index 357ac0358..000000000
--- a/dist/CoreUtils/Setoid.js
+++ /dev/null
@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSetoidShallowEq = exports.setoidShallowEq = exports.getSetoidStrict = exports.setoidStrict = void 0;
-
-var _Setoid = require("fp-ts/lib/Setoid");
-
-var _shallowEqual = require("./shallowEqual");
-
-/**
- * Generic setoid that uses strict equality checking
- */
-const setoidStrict = {
-  equals: _Setoid.strictEqual
-  /**
-   * Function that returns a generic setoid that uses strict equality checking
-   */
-
-};
-exports.setoidStrict = setoidStrict;
-
-const getSetoidStrict = () => setoidStrict;
-/**
- * Generic setoid that uses shallow equality checking
- */
-
-
-exports.getSetoidStrict = getSetoidStrict;
-const setoidShallowEq = {
-  equals: _shallowEqual.shallowEqual
-  /**
-   * Function that returns a generic setoid that uses shallow equality checking
-   */
-
-};
-exports.setoidShallowEq = setoidShallowEq;
-
-const getSetoidShallowEq = () => setoidShallowEq;
-
-exports.getSetoidShallowEq = getSetoidShallowEq;
\ No newline at end of file
diff --git a/dist/CoreUtils/__tests__/Array.jest.js b/dist/CoreUtils/__tests__/Array.jest.js
deleted file mode 100644
index 9ca9f21da..000000000
--- a/dist/CoreUtils/__tests__/Array.jest.js
+++ /dev/null
@@ -1,42 +0,0 @@
-"use strict";
-
-var _Array = require("../Array");
-
-const isGreaterThanZero = x => x > 0;
-
-describe('all', () => {
-  it('should return false when a member of the array does not hold true for a predicate', () => {
-    const actual = (0, _Array.all)([-1, 0, 1, 2, 3], isGreaterThanZero);
-    const expected = false;
-    expect(actual).toBe(expected);
-  });
-  it('should return true when a predicate holds true for all members of an array', () => {
-    const actual = (0, _Array.all)([1, 2, 3, 4, 5], isGreaterThanZero);
-    const expected = true;
-    expect(actual).toBe(expected);
-  });
-});
-describe('any', () => {
-  it('should return true when a predicate holds true for any member of an array', () => {
-    const actual = (0, _Array.any)([-5, 0, -3, 2], isGreaterThanZero);
-    const expected = true;
-    expect(actual).toBe(expected);
-  });
-  it('should return false when a predicate holds true for no members of an array', () => {
-    const actual = (0, _Array.any)([-5, -4, -3, -2, -1], isGreaterThanZero);
-    const expected = false;
-    expect(actual).toBe(expected);
-  });
-});
-describe('notAny', () => {
-  it('should return false when a predicate holds true for any member of an array', () => {
-    const actual = (0, _Array.notAny)([-5, 0, -3, 2], isGreaterThanZero);
-    const expected = false;
-    expect(actual).toBe(expected);
-  });
-  it('should return true when a predicate holds true for no members of an array', () => {
-    const actual = (0, _Array.notAny)([-5, -4, -3, -2, -1], isGreaterThanZero);
-    const expected = true;
-    expect(actual).toBe(expected);
-  });
-});
\ No newline at end of file
diff --git a/dist/CoreUtils/general.d.ts b/dist/CoreUtils/general.d.ts
deleted file mode 100644
index 16e4f45c2..000000000
--- a/dist/CoreUtils/general.d.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Function2 } from 'fp-ts/lib/function';
-import { Falsy } from './type-level';
-export declare const constVoid: () => void;
-/**
- * Flips the order of the arguments to an uncurried function taking two
- * arguments.
- */
-export declare const flip_: <A, B, C>(f: Function2<A, B, C>) => Function2<B, A, C>;
-/**
- * Simple binary composition. Also known as `compose2`
- */
-export declare const o: <A, B, C>(f: (y: B) => C, g: (x: A) => B) => (x: A) => C;
-/**
- * Api action helper
- *
- * Example:
- * const LoadPackagesApiActionTypes = makeApiActionTypes(
- *   'learning/content-authoring/LOAD_PACKAGES/optimistic',
- *   'learning/content-authoring/LOAD_PACKAGES/request',
- *   'learning/content-authoring/LOAD_PACKAGES/success',
- *   'learning/content-authoring/LOAD_PACKAGES/failure',
- * )
- */
-export declare const makeApiActionTypes: <A extends [string, string, string, string]>(...args: A) => {
-    optimistic: A[0];
-    request: A[1];
-    success: A[2];
-    failure: A[3];
-};
-/**
- * Constant action helper
- *
- * Example:
- * const LoadPackages = makeConstantActionType(
- *   'learning/content-authoring/LOAD_PACKAGES',
- * )
- */
-export declare const makeConstantActionType: <A extends [string]>(...args: A) => A[0];
-/**
- * Type guard for the Falsy type
- */
-export declare const isFalsy: (x: any) => x is Falsy;
diff --git a/dist/CoreUtils/general.js b/dist/CoreUtils/general.js
deleted file mode 100644
index 07e756436..000000000
--- a/dist/CoreUtils/general.js
+++ /dev/null
@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isFalsy = exports.makeConstantActionType = exports.makeApiActionTypes = exports.o = exports.flip_ = exports.constVoid = void 0;
-
-var _newtypes = require("./newtypes");
-
-var _primitiveGuards = require("./primitive-guards");
-
-const constVoid = () => {};
-/**
- * Flips the order of the arguments to an uncurried function taking two
- * arguments.
- */
-
-
-exports.constVoid = constVoid;
-
-const flip_ = f => (b, a) => f(a, b);
-/**
- * Simple binary composition. Also known as `compose2`
- */
-
-
-exports.flip_ = flip_;
-
-const o = (f, g) => x => f(g(x));
-/**
- * Api action helper
- *
- * Example:
- * const LoadPackagesApiActionTypes = makeApiActionTypes(
- *   'learning/content-authoring/LOAD_PACKAGES/optimistic',
- *   'learning/content-authoring/LOAD_PACKAGES/request',
- *   'learning/content-authoring/LOAD_PACKAGES/success',
- *   'learning/content-authoring/LOAD_PACKAGES/failure',
- * )
- */
-
-
-exports.o = o;
-
-const makeApiActionTypes = (...args) => ({
-  optimistic: args[0],
-  request: args[1],
-  success: args[2],
-  failure: args[3]
-});
-/**
- * Constant action helper
- *
- * Example:
- * const LoadPackages = makeConstantActionType(
- *   'learning/content-authoring/LOAD_PACKAGES',
- * )
- */
-
-
-exports.makeApiActionTypes = makeApiActionTypes;
-
-const makeConstantActionType = (...args) => args[0];
-/**
- * Type guard for the Falsy type
- */
-// tslint:disable-next-line:no-any
-
-
-exports.makeConstantActionType = makeConstantActionType;
-
-const isFalsy = x => (0, _primitiveGuards.isNil)(x) || (0, _primitiveGuards.isFalse)(x) || (0, _primitiveGuards.isEmptyString)(x) || (0, _primitiveGuards.isZero)(x) || (0, _primitiveGuards.isNumber)(x) && (0, _newtypes.isNewtypeNaN)(x);
-
-exports.isFalsy = isFalsy;
\ No newline at end of file
diff --git a/dist/CoreUtils/newtypes.js b/dist/CoreUtils/newtypes.js
deleted file mode 100644
index 4f424705d..000000000
--- a/dist/CoreUtils/newtypes.js
+++ /dev/null
@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.prismNaN = exports.isNewtypeNaN = void 0;
-
-var _newtypeTs = require("newtype-ts");
-
-/**
- * Alias for Number.isNaN
- */
-const isNewtypeNaN = Number.isNaN; // use this prism to return an option with prismNaN.getOption(someNumber)
-
-exports.isNewtypeNaN = isNewtypeNaN;
-const prismNaN = (0, _newtypeTs.prism)(isNewtypeNaN);
-exports.prismNaN = prismNaN;
\ No newline at end of file
diff --git a/dist/CoreUtils/tuple.d.ts b/dist/CoreUtils/tuple.d.ts
deleted file mode 100644
index 1aa666194..000000000
--- a/dist/CoreUtils/tuple.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Primitive } from './type-level';
-/**
- * Utility for constructing tuples with proper inference
- */
-export declare const tuple: <A extends Primitive[]>(...args: A) => A;
-/**
- * Flips the position of each item in a 2-tuple
- */
-export declare const swap: <A, B>([x, y]: [A, B]) => [B, A];
-/**
- * sequence utility for a tuple of Options
- */
-export declare const sequenceTupleOptions: import("fp-ts/lib/Apply").SequenceT1<"Option">;
-/**
- * sequence utility for a tuple of Eithers
- */
-export declare const sequenceTupleEithers: import("fp-ts/lib/Apply").SequenceT2<"Either">;
-/**
- * sequence utility for a tuple of Task
- */
-export declare const sequenceTupleTasks: import("fp-ts/lib/Apply").SequenceT1<"Task">;
-/**
- * sequence utility for a tuple of TaskEithers
- */
-export declare const sequenceTupleTaskEithers: import("fp-ts/lib/Apply").SequenceT2<"TaskEither">;
diff --git a/dist/CoreUtils/tuple.js b/dist/CoreUtils/tuple.js
deleted file mode 100644
index 3cc7f39b3..000000000
--- a/dist/CoreUtils/tuple.js
+++ /dev/null
@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sequenceTupleTaskEithers = exports.sequenceTupleTasks = exports.sequenceTupleEithers = exports.sequenceTupleOptions = exports.swap = exports.tuple = void 0;
-
-var _Apply = require("fp-ts/lib/Apply");
-
-var _Either = require("fp-ts/lib/Either");
-
-var _Option = require("fp-ts/lib/Option");
-
-var _Task = require("fp-ts/lib/Task");
-
-var _TaskEither = require("fp-ts/lib/TaskEither");
-
-/**
- * Utility for constructing tuples with proper inference
- */
-const tuple = (...args) => args;
-/**
- * Flips the position of each item in a 2-tuple
- */
-
-
-exports.tuple = tuple;
-
-const swap = ([x, y]) => [y, x];
-/**
- * sequence utility for a tuple of Options
- */
-
-
-exports.swap = swap;
-const sequenceTupleOptions = (0, _Apply.sequenceT)(_Option.option);
-/**
- * sequence utility for a tuple of Eithers
- */
-
-exports.sequenceTupleOptions = sequenceTupleOptions;
-const sequenceTupleEithers = (0, _Apply.sequenceT)(_Either.either);
-/**
- * sequence utility for a tuple of Task
- */
-
-exports.sequenceTupleEithers = sequenceTupleEithers;
-const sequenceTupleTasks = (0, _Apply.sequenceT)(_Task.task);
-/**
- * sequence utility for a tuple of TaskEithers
- */
-
-exports.sequenceTupleTasks = sequenceTupleTasks;
-const sequenceTupleTaskEithers = (0, _Apply.sequenceT)(_TaskEither.taskEither);
-exports.sequenceTupleTaskEithers = sequenceTupleTaskEithers;
\ No newline at end of file
diff --git a/dist/StyleHelpers.d.ts b/dist/StyleHelpers.d.ts
index bf46e868e..d3a9becef 100644
--- a/dist/StyleHelpers.d.ts
+++ b/dist/StyleHelpers.d.ts
@@ -1,15 +1,9 @@
-import React from 'react';
-import { FlattenInterpolation, SimpleInterpolation, ThemeProps } from 'styled-components';
 import { GlobalAppThemeInterface } from '@monorail/globalAppTheme';
-export declare type CssOverrides = SimpleInterpolation | FlattenInterpolation<ThemeProps<GlobalAppThemeInterface>>[];
+import { FlattenInterpolation, SimpleInterpolation, ThemeProps } from 'styled-components';
+export declare type CssOverrides = SimpleInterpolation | FlattenInterpolation<ThemeProps<GlobalAppThemeInterface>>;
 export declare type StyledComponentCssOverrides = {
     cssOverrides?: CssOverrides;
 };
-/**
- * TODO: Get rid of this. This was something Dan added that isn't correctly typed. Any references should be replaced
- * with styled<Props, 'div'>('div')
- */
-export declare const styled: <P, E = HTMLDivElement>(tagName: string | React.ComponentClass<P, any> | React.FunctionComponent<P>) => import("styled-components").ThemedStyledFunction<P & React.HTMLProps<E>, any, any>;
 declare type Props = {
     cssOverrides?: CssOverrides;
 };
@@ -25,6 +19,6 @@ declare type Props = {
   />
  ```
  */
-export declare const Div: import("styled-components").StyledComponentClass<Props, any, Props & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
-export declare const Form: import("styled-components").StyledComponentClass<Props, any, Props & React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>>;
+export declare const Div: import("styled-components").StyledComponent<"div", any, Props, never>;
+export declare const Form: import("styled-components").StyledComponent<"form", any, Props, never>;
 export {};
diff --git a/dist/StyleHelpers.js b/dist/StyleHelpers.js
index 8775b3ad0..b1acca382 100644
--- a/dist/StyleHelpers.js
+++ b/dist/StyleHelpers.js
@@ -3,20 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Form = exports.Div = exports.styled = void 0;
+exports.Form = exports.Div = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * TODO: Get rid of this. This was something Dan added that isn't correctly typed. Any references should be replaced
- * with styled<Props, 'div'>('div')
- */
-const styled = tagName => (0, _styledComponents.default)(tagName); // tslint:disable-line:no-any
-
-
-exports.styled = styled;
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 /**
  * The Div helper is a component that accepts `css` prop so we can easily inline CSS Objects with TypeScript support.
@@ -32,19 +23,22 @@ exports.styled = styled;
  */
 const Div =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "StyleHelpers__Div",
   componentId: "pyarqy-0"
-})(["", ""], ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";"], cssOverrides));
+
 exports.Div = Div;
+
 const Form =
 /*#__PURE__*/
-(0, _styledComponents.default)('form').withConfig({
+_styledComponents.default.form.withConfig({
   displayName: "StyleHelpers__Form",
   componentId: "pyarqy-1"
-})(["", ""], ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";"], cssOverrides));
+
 exports.Form = Form;
\ No newline at end of file
diff --git a/dist/actionsMenu/ActionsMenu.d.ts b/dist/actionsMenu/ActionsMenu.d.ts
new file mode 100644
index 000000000..46465124f
--- /dev/null
+++ b/dist/actionsMenu/ActionsMenu.d.ts
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+declare type ActionsMenuProps = {
+    menuItems: Array<{
+        label: string;
+        iconName?: string;
+        onClick: () => void;
+        featuredAction?: boolean;
+    }>;
+};
+export declare const ActionsMenu: FC<ActionsMenuProps>;
+export {};
diff --git a/dist/actionsMenu/ActionsMenu.js b/dist/actionsMenu/ActionsMenu.js
new file mode 100644
index 000000000..88009e706
--- /dev/null
+++ b/dist/actionsMenu/ActionsMenu.js
@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionsMenu = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PopOver = require("../popOver/PopOver");
+
+var _List = require("../list/List");
+
+var _IconButton = require("../buttons/IconButton");
+
+var _Menu = require("../menu/Menu");
+
+var _buttonTypes = require("../buttons/buttonTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+* Components
+*/
+const ActionsMenu = ({
+  menuItems
+}) => _react.default.createElement(_react.default.Fragment, null, menuItems.length > 0 && _react.default.createElement(_PopOver.PopOver, {
+  popOver: props => _react.default.createElement(_Menu.Menu, props, menuItems.map(menuItem => _react.default.createElement(_List.SimpleListItem, {
+    size: 32,
+    leftIcon: menuItem.iconName,
+    primaryText: menuItem.label,
+    onClick: menuItem.onClick
+  }))),
+  toggle: props => _react.default.createElement(_IconButton.IconButton, _extends({
+    icon: "more_vert",
+    display: _buttonTypes.ButtonDisplay.Chromeless
+  }, props))
+}));
+
+exports.ActionsMenu = ActionsMenu;
\ No newline at end of file
diff --git a/dist/alertBox/AlertBox.d.ts b/dist/alertBox/AlertBox.d.ts
index d7304850f..0495db292 100644
--- a/dist/alertBox/AlertBox.d.ts
+++ b/dist/alertBox/AlertBox.d.ts
@@ -1,10 +1,10 @@
-import React, { Component, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 declare type CCAlertBoxProps = {
     cssOverrides?: SimpleInterpolation;
     label?: ReactNode;
 };
-export declare const CCAlertBox: import("styled-components").StyledComponentClass<CCAlertBoxProps, any, CCAlertBoxProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const CCAlertBox: import("styled-components").StyledComponent<"div", any, CCAlertBoxProps, never>;
 declare type AlertBoxProps = CCAlertBoxProps & {
     icon: string;
     key?: string | number;
diff --git a/dist/alertBox/AlertBox.js b/dist/alertBox/AlertBox.js
index 6405ad839..89787072b 100644
--- a/dist/alertBox/AlertBox.js
+++ b/dist/alertBox/AlertBox.js
@@ -7,25 +7,25 @@ exports.AlertBox = exports.CCAlertBox = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Icon = require("../icon/Icon");
 
 var _CommonStyles = require("../CommonStyles");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 const iconSize = 32;
+
 const CCAlertBox =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "AlertBox__CCAlertBox",
   componentId: "sc-1wdletb-0"
-})(["", ";background-color:", ";border-radius:4px;flex-shrink:0;height:48px;position:relative;&::before{bottom:8px;content:'';left:16px;position:absolute;width:32px;}", ";"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.Red, 0.15), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";background-color:", ";border-radius:4px;flex-shrink:0;height:48px;position:relative;&::before{bottom:8px;content:'';left:16px;position:absolute;width:32px;}", ";"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.Red, 0.15), cssOverrides));
+
 exports.CCAlertBox = CCAlertBox;
 const StyledIconLeft =
 /*#__PURE__*/
@@ -33,15 +33,17 @@ const StyledIconLeft =
   displayName: "AlertBox__StyledIconLeft",
   componentId: "sc-1wdletb-1"
 })(["color:#f44336;margin:8px 12px 8px 16px;position:relative;"]);
+
 const Title =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "AlertBox__Title",
   componentId: "sc-1wdletb-2"
 })(["", ";color:", ";margin:16px 0;"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title3), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89));
+
 const AlertDetails =
 /*#__PURE__*/
-(0, _styledComponents.default)('span').withConfig({
+_styledComponents.default.span.withConfig({
   displayName: "AlertBox__AlertDetails",
   componentId: "sc-1wdletb-3"
 })(["", ";color:", ";margin:auto 48px auto auto;"], (0, _CommonStyles.typography)(300, _CommonStyles.FontSizes.Content), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89));
diff --git a/dist/appIcon/AppIcon.d.ts b/dist/appIcon/AppIcon.d.ts
index dbbbb37d6..28759d108 100644
--- a/dist/appIcon/AppIcon.d.ts
+++ b/dist/appIcon/AppIcon.d.ts
@@ -1,10 +1,8 @@
-/// <reference types="styled-components" />
-import { AppOrAuthSubAppName } from '@monorail/CommonStyles';
+/// <reference types="react" />
 import { CommonComponentType } from '@monorail/types';
+import { AppOrAuthSubAppName } from '@monorail/CommonStyles';
 declare type AppIconProps = CommonComponentType & {
     appName: AppOrAuthSubAppName;
 };
-export declare const AppIcon: import("styled-components").StyledComponentClass<AppIconProps, any, Pick<AppIconProps, "id" | "cssOverrides" | "className" | "as" | "tabIndex" | "appName"> & {
-    theme?: any;
-}>;
+export declare const AppIcon: import("styled-components").StyledComponent<({ appName, cssOverrides, ...otherProps }: any) => JSX.Element, any, AppIconProps, never>;
 export {};
diff --git a/dist/appIcon/AppIcon.js b/dist/appIcon/AppIcon.js
index fa753c355..f6e147e74 100644
--- a/dist/appIcon/AppIcon.js
+++ b/dist/appIcon/AppIcon.js
@@ -9,10 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _CommonStyles = require("../CommonStyles");
-
 var _Icon = require("../icon/Icon");
 
+var _CommonStyles = require("../CommonStyles");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,13 +24,9 @@ const AppIcon =
   cssOverrides,
   ...otherProps
 }) => _react.default.createElement("div", otherProps, _react.default.createElement(_Icon.Icon, {
-  icon: (0, _CommonStyles.convertAppNameToString)(appName)
-}))).withConfig({
-  displayName: "AppIcon",
-  componentId: "akmtp-0"
-})(["", ";", ";", ";box-sizing:border-box;height:16px;width:16px;", "{fill:", ";height:100%;margin:auto;width:100%;}", ";"], ({
-  appName
-}) => (0, _styledComponents.css)(["background:", ";"], (0, _CommonStyles.colors)((0, _CommonStyles.convertAppNameToColor)(appName))), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.borderRadius)(), _Icon.Icon, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), ({
+  icon: appName
+})))(({
+  appName,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";background:", ";box-sizing:border-box;height:16px;width:16px;", "{fill:", ";height:100%;margin:auto;width:100%;}", ";"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)((0, _CommonStyles.convertAppNameToColor)(appName)), _Icon.Icon, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), cssOverrides));
 exports.AppIcon = AppIcon;
\ No newline at end of file
diff --git a/dist/avatar/Avatar.js b/dist/avatar/Avatar.js
index cfccec600..f52a0d720 100644
--- a/dist/avatar/Avatar.js
+++ b/dist/avatar/Avatar.js
@@ -18,16 +18,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const size = 24;
+
 const CCAvatar =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Avatar__CCAvatar",
   componentId: "sc-1c6ik2-0"
-})(["", ";color:", ";flex-shrink:0;font-size:9.89px;font-weight:900;height:", "px;line-height:", "px;text-align:center;text-transform:uppercase;user-select:none;width:", "px;", ";"], ({
-  team
-}) => team ? (0, _styledComponents.css)(["", ";background:", ";"], (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue)) : (0, _styledComponents.css)(["background:", ";border-radius:", "px;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), size / 2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), size, size, size, ({
+})(({
+  team,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";color:", ";flex-shrink:0;font-size:9.89px;font-weight:900;height:", "px;line-height:", "px;text-align:center;text-transform:uppercase;user-select:none;width:", "px;", ";"], team ? (0, _styledComponents.css)(["", ";background:", ";"], (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue)) : (0, _styledComponents.css)(["background:", ";border-radius:", "px;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), size / 2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), size, size, size, cssOverrides));
 
 const Avatar = ({
   cssOverrides,
diff --git a/dist/brand/Logo.d.ts b/dist/brand/Logo.d.ts
index bac9693cc..c0d00c5e9 100644
--- a/dist/brand/Logo.d.ts
+++ b/dist/brand/Logo.d.ts
@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { Colors } from '@monorail/CommonStyles';
 import { SimpleInterpolation } from 'styled-components';
+import { Colors } from '@monorail/CommonStyles';
 export declare const SimSpaceLogo: ComponentType<{
     background?: Colors.BrandDarkBlue | Colors.BrandLightBlue;
     cssOverrides?: SimpleInterpolation;
diff --git a/dist/brand/Logo.js b/dist/brand/Logo.js
index 02265ddb2..d6336f56a 100644
--- a/dist/brand/Logo.js
+++ b/dist/brand/Logo.js
@@ -7,9 +7,11 @@ exports.PCTELogoMark = exports.SimSpaceLogoFlat = exports.SimSpaceLogoMark = exp
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _CommonStyles = require("../CommonStyles");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -17,12 +19,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const LogoSvg =
 /*#__PURE__*/
-(0, _styledComponents.default)('svg').withConfig({
+_styledComponents.default.svg.withConfig({
   displayName: "Logo__LogoSvg",
   componentId: "zbc3vb-0"
-})(["height:100%;width:auto;", ";"], ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["height:100%;width:auto;", ";"], cssOverrides));
 
 const SimSpaceLogo = ({
   background,
diff --git a/dist/brand/LogoBox.d.ts b/dist/brand/LogoBox.d.ts
index fef069c41..f255b30ee 100644
--- a/dist/brand/LogoBox.d.ts
+++ b/dist/brand/LogoBox.d.ts
@@ -1,10 +1,8 @@
-/// <reference path="../../src/typings/cssprop.d.ts" />
-/// <reference types="react" />
 import { SimpleInterpolation } from 'styled-components';
 declare type LogoBoxProps = {
     alignRight?: boolean;
     alignLeft?: boolean;
     cssOverrides?: SimpleInterpolation;
 };
-export declare const LogoBox: import("styled-components").StyledComponentClass<LogoBoxProps, any, LogoBoxProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const LogoBox: import("styled-components").StyledComponent<"div", any, LogoBoxProps, never>;
 export {};
diff --git a/dist/brand/LogoBox.js b/dist/brand/LogoBox.js
index 6b584bc25..4eb30ca0a 100644
--- a/dist/brand/LogoBox.js
+++ b/dist/brand/LogoBox.js
@@ -5,22 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LogoBox = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _CommonStyles = require("../CommonStyles");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 const LogoBox =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "LogoBox",
   componentId: "sc-19npjna-0"
-})(["", ";", ";background:", ";display:inline-block;height:32px;max-width:200px;padding:4px 8px;position:relative;", " ", " ", ";"], (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation0), (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), ({
-  alignLeft
-}) => alignLeft && `position: absolute; left: 8px; top:8px;`, ({
-  alignRight
-}) => alignRight && `position: absolute; right: 8px; top:8px;`, ({
+})(({
+  alignLeft,
+  alignRight,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";", ";background:", ";height:32px;justify-content:center;max-width:144px;padding:4px 8px;position:relative;", " ", " ", ";"], (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.flexFlow)('column'), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation0), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), alignLeft && (0, _styledComponents.css)(["position:absolute;left:8px;top:8px;"]), alignRight && (0, _styledComponents.css)(["position:absolute;right:8px;top:8px;"]), cssOverrides));
+
 exports.LogoBox = LogoBox;
\ No newline at end of file
diff --git a/dist/buttons/Button.d.ts b/dist/buttons/Button.d.ts
index 30d3e2be4..4a10d3dc8 100644
--- a/dist/buttons/Button.d.ts
+++ b/dist/buttons/Button.d.ts
@@ -1,25 +1,25 @@
 import { Component, MouseEvent } from 'react';
-import { SimpleInterpolation } from 'styled-components';
 import { ButtonDisplay, ButtonSize } from '@monorail/buttons/buttonTypes';
+import { CommonComponentType } from '@monorail/types';
+import { LinkProps } from '@monorail/list/List';
 export declare const buttonDisplayCss: {
-    [ButtonDisplay.Primary]: import("styled-components").InterpolationValue[];
-    [ButtonDisplay.Secondary]: import("styled-components").InterpolationValue[];
-    [ButtonDisplay.Outline]: import("styled-components").InterpolationValue[];
-    [ButtonDisplay.Chromeless]: import("styled-components").InterpolationValue[];
+    [ButtonDisplay.Primary]: import("styled-components").FlattenSimpleInterpolation;
+    [ButtonDisplay.Secondary]: import("styled-components").FlattenSimpleInterpolation;
+    [ButtonDisplay.Outline]: import("styled-components").FlattenSimpleInterpolation;
+    [ButtonDisplay.Chromeless]: import("styled-components").FlattenSimpleInterpolation;
 };
 export declare const buttonSizeCss: {
-    [ButtonSize.Dense]: import("styled-components").InterpolationValue[];
-    [ButtonSize.Compact]: import("styled-components").InterpolationValue[];
-    [ButtonSize.Default]: import("styled-components").InterpolationValue[];
-    [ButtonSize.Large]: import("styled-components").InterpolationValue[];
+    [ButtonSize.Dense]: import("styled-components").FlattenSimpleInterpolation;
+    [ButtonSize.Compact]: import("styled-components").FlattenSimpleInterpolation;
+    [ButtonSize.Default]: import("styled-components").FlattenSimpleInterpolation;
+    [ButtonSize.Large]: import("styled-components").FlattenSimpleInterpolation;
 };
-export declare type ButtonProps = {
+export declare type ButtonProps = CommonComponentType & LinkProps & {
     size: ButtonSize;
     display: ButtonDisplay;
-    cssOverrides?: SimpleInterpolation;
     disabled?: boolean;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    type: string;
+    type: 'button' | 'reset' | 'submit';
 };
 export declare class Button extends Component<ButtonProps> {
     static defaultProps: {
diff --git a/dist/buttons/Button.js b/dist/buttons/Button.js
index 0bc79a6d6..083d621f2 100644
--- a/dist/buttons/Button.js
+++ b/dist/buttons/Button.js
@@ -33,20 +33,18 @@ const buttonSizeCss = {
   [_buttonTypes.ButtonSize.Large]: (0, _styledComponents.css)(["height:32px;padding:0 15px;"])
 };
 exports.buttonSizeCss = buttonSizeCss;
+
 const CCButton =
 /*#__PURE__*/
-(0, _styledComponents.default)('button').withConfig({
+_styledComponents.default.button.withConfig({
   displayName: "Button__CCButton",
   componentId: "sc-1yaavbq-0"
-})(["", ";", ";", ";", ";", ";cursor:pointer;flex-shrink:0;outline:none;text-transform:uppercase;user-select:none;", ";", "{color:currentColor;margin-left:-4px;margin-right:4px;margin-top:-16px;position:relative;top:4px;}", ";", ";"], ({
-  display
-}) => buttonDisplayCss[display], ({
-  size
-}) => buttonSizeCss[size], ({
-  disabled
-}) => disabled && _CommonStyles.baseDisabledStyles, (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), _CommonStyles.buttonTransition, _Icon.Icon, (0, _CommonStyles.baseFocusStyles)(), ({
+})(({
+  disabled,
+  size,
+  display,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";", ";", ";", ";", ";align-items:center;cursor:pointer;flex-shrink:0;outline:none;text-transform:uppercase;user-select:none;justify-content:center;", ";", "{color:currentColor;margin:auto 4px auto - 4px;}", ";", ";"], buttonDisplayCss[display], buttonSizeCss[size], disabled && _CommonStyles.baseDisabledStyles, (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.flexFlow)('row'), _CommonStyles.buttonTransition, _Icon.Icon, (0, _CommonStyles.baseFocusStyles)(), cssOverrides));
 
 class Button extends _react.Component {
   render() {
diff --git a/dist/buttons/IconButton.d.ts b/dist/buttons/IconButton.d.ts
index 81be75362..8f7221016 100644
--- a/dist/buttons/IconButton.d.ts
+++ b/dist/buttons/IconButton.d.ts
@@ -1,7 +1,7 @@
-import React, { Component, MouseEvent } from 'react';
+import { Component, MouseEvent } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 import { ButtonSize, ButtonDisplay, IconButtonShape } from '@monorail/buttons/buttonTypes';
-export declare const CCIconButton: import("styled-components").StyledComponentClass<CCIconButtonProps, any, CCIconButtonProps & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const CCIconButton: import("styled-components").StyledComponent<"button", any, CCIconButtonProps, never>;
 declare type CCIconButtonProps = {
     cssOverrides?: SimpleInterpolation;
     darkMode?: boolean;
@@ -11,7 +11,8 @@ declare type CCIconButtonProps = {
     iconCss?: SimpleInterpolation;
     onClick?: (event: MouseEvent<Element>) => void;
     size: ButtonSize;
-    type: string;
+    type: 'button' | 'reset' | 'submit';
+    className?: string;
 };
 export declare type IconButtonProps = CCIconButtonProps & {
     icon: string;
diff --git a/dist/buttons/IconButton.js b/dist/buttons/IconButton.js
index 456d1a57f..18e7bdda8 100644
--- a/dist/buttons/IconButton.js
+++ b/dist/buttons/IconButton.js
@@ -9,10 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _CommonStyles = require("../CommonStyles");
-
 var _Icon = require("../icon/Icon");
 
+var _CommonStyles = require("../CommonStyles");
+
 var _buttonTypes = require("./buttonTypes");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -31,36 +31,33 @@ const iconButtonSizeCss = {
   [_buttonTypes.ButtonSize.Default]: (0, _styledComponents.css)(["height:24px;width:24px;"]),
   [_buttonTypes.ButtonSize.Large]: (0, _styledComponents.css)(["height:32px;width:32px;", "{font-size:24px;}"], _Icon.Icon)
 };
+
 const CCIconButton =
 /*#__PURE__*/
-(0, _styledComponents.default)('button').withConfig({
+_styledComponents.default.button.withConfig({
   displayName: "IconButton__CCIconButton",
   componentId: "sc-6j6oar-0"
-})(["", ";", ";", ";", ";", ";align-items:center;box-sizing:border-box;cursor:pointer;flex-shrink:0;justify-content:center;outline:none;padding:0;text-transform:uppercase;user-select:none;", ";", "{", ";", ";}", ";", ";"], ({
-  display
-}) => iconButtonDisplayCss[display], ({
-  size
-}) => iconButtonSizeCss[size], ({
-  disabled
-}) => disabled && _CommonStyles.baseDisabledStyles, ({
-  shape
-}) => (0, _CommonStyles.borderRadius)(shape === _buttonTypes.IconButtonShape.Default ? _CommonStyles.BorderRadius.Round : _CommonStyles.BorderRadius.Medium), (0, _CommonStyles.flexFlow)(), _CommonStyles.buttonTransition, _Icon.Icon, ({
-  darkMode
-}) => darkMode ? (0, _styledComponents.css)(["color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White)) : (0, _styledComponents.css)(["color:currentColor;"]), ({
+})(({
+  disabled,
+  display,
+  size,
+  shape,
+  cssOverrides,
+  darkMode,
   iconCss
-}) => iconCss, (0, _CommonStyles.baseFocusStyles)(), ({
-  cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";", ";", ";", ";align-items:center;box-sizing:border-box;cursor:pointer;flex-shrink:0;justify-content:center;outline:none;padding:0;text-transform:uppercase;user-select:none;", ";", "{", ";", ";}", ";", ";"], iconButtonDisplayCss[display], iconButtonSizeCss[size], disabled && _CommonStyles.baseDisabledStyles, (0, _CommonStyles.borderRadius)(shape === _buttonTypes.IconButtonShape.Default ? _CommonStyles.BorderRadius.Round : _CommonStyles.BorderRadius.Medium), (0, _CommonStyles.flexFlow)(), _CommonStyles.buttonTransition, _Icon.Icon, darkMode ? (0, _styledComponents.css)(["color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White)) : (0, _styledComponents.css)(["color:currentColor;"]), iconCss, (0, _CommonStyles.baseFocusStyles)(), cssOverrides));
+
 exports.CCIconButton = CCIconButton;
 
 class IconButton extends _react.Component {
   render() {
     const {
       icon,
+      className,
       ...otherProps
     } = this.props;
     return _react.default.createElement(CCIconButton, _extends({
-      className: "new-button"
+      className: `new-button ${className}`
     }, otherProps), _react.default.createElement(_Icon.Icon, {
       icon: icon
     }));
diff --git a/dist/buttons/LoadingButton.d.ts b/dist/buttons/LoadingButton.d.ts
index 8b02bff73..e6e4b56f4 100644
--- a/dist/buttons/LoadingButton.d.ts
+++ b/dist/buttons/LoadingButton.d.ts
@@ -1,7 +1,7 @@
 import { Component, MouseEvent } from 'react';
 import { ButtonProps } from './Button';
-import { Omit } from 'typelevel-ts';
 import { ButtonDisplay, ButtonSize } from '@monorail/buttons/buttonTypes';
+import { Omit } from 'typelevel-ts';
 declare type Props = Omit<ButtonProps, 'onClick'> & {
     loadingText?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => Promise<void>;
diff --git a/dist/cards/Cards.d.ts b/dist/cards/Cards.d.ts
index 90d08528a..f606e6a98 100644
--- a/dist/cards/Cards.d.ts
+++ b/dist/cards/Cards.d.ts
@@ -1,17 +1,16 @@
-import React, { MouseEvent, StatelessComponent, Ref } from 'react';
-import { AppName, ElevationRange } from '@monorail/CommonStyles';
+import React, { MouseEvent, Ref, StatelessComponent, ReactNode } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 import { CommonComponentType } from '@monorail/types';
+import { AppName, ElevationRange } from '@monorail/CommonStyles';
 export declare type BBCardBackgroundProps = CommonComponentType & {
     hover?: boolean;
     elevation?: ElevationRange;
     onClick?: (event: MouseEvent) => void;
     ref?: Ref<any>;
     cssCardContent?: SimpleInterpolation;
+    children?: ReactNode;
 };
-export declare const BBCardBackground: import("styled-components").StyledComponentClass<BBCardBackgroundProps, any, Pick<BBCardBackgroundProps, "id" | "ref" | "cssOverrides" | "className" | "onClick" | "as" | "tabIndex" | "elevation" | "hover" | "cssCardContent"> & {
-    theme?: any;
-}>;
+export declare const BBCardBackground: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Pick<BBCardBackgroundProps, "id" | "children" | "className" | "tabIndex" | "onClick" | "cssOverrides" | "elevation" | "as" | "hover" | "cssCardContent"> & React.RefAttributes<HTMLDivElement>>, any, BBCardBackgroundProps, never>;
 declare type BBCardBottomBorderProps = {
     accentColor?: string;
 };
@@ -28,5 +27,5 @@ declare type BBCardGridProps = {
     cardWidth?: number;
     cssOverrides?: SimpleInterpolation;
 };
-export declare const BBCardGrid: import("styled-components").StyledComponentClass<BBCardGridProps, any, BBCardGridProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const BBCardGrid: import("styled-components").StyledComponent<"div", any, BBCardGridProps, never>;
 export {};
diff --git a/dist/cards/Cards.js b/dist/cards/Cards.js
index f6aa02c5f..d2d46d0c4 100644
--- a/dist/cards/Cards.js
+++ b/dist/cards/Cards.js
@@ -7,26 +7,27 @@ exports.BBCardGrid = exports.BBCardHeader = exports.BBCardBackground = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _AppIcon = require("../appIcon/AppIcon");
 
 var _Icon = require("../icon/Icon");
 
 var _CommonStyles = require("../CommonStyles");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const BBCardContent =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Cards__BBCardContent",
   componentId: "mqkraz-0"
-})(["", ";border-radius:inherit;height:100%;overflow:hidden;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides); // building-blocks/cards/background
+}) => (0, _styledComponents.css)(["", ";border-radius:inherit;height:100%;overflow:hidden;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides)); // building-blocks/cards/background
+
 
 const BBCardBackground =
 /*#__PURE__*/
@@ -41,57 +42,56 @@ const BBCardBackground =
   ref: ref
 }, otherProps), _react.default.createElement(BBCardContent, {
   cssOverrides: cssCardContent
-}, children)))).withConfig({
-  displayName: "Cards__BBCardBackground",
-  componentId: "mqkraz-1"
-})(["", ";", ";", ";background:", ";position:relative;z-index:0;", ";&::before{border-radius:inherit;background:", ";bottom:0;content:'';left:0;position:absolute;right:0;top:0;z-index:0;}&::after{", ";", ";background:", ";bottom:2px;content:'';left:2px;position:absolute;right:2px;top:2px;z-index:-5;}"], ({
-  hover
-}) => hover && (0, _styledComponents.css)(["cursor:pointer;&:hover{&::after{transition:box-shadow ease 125ms;", ";}}"], (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation10)), (0, _CommonStyles.flexFlow)(), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Large), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), ({
-  cssOverrides
-}) => cssOverrides, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Medium), ({
+}, children))))(({
+  hover,
+  cssOverrides,
   elevation = _CommonStyles.ElevationRange.Elevation6
-}) => (0, _CommonStyles.getElevation)(elevation), (0, _CommonStyles.colors)(_CommonStyles.Colors.White));
+}) => (0, _styledComponents.css)(["", ";", ";", ";background:", ";position:relative;z-index:0;", ";&::before{border-radius:inherit;background:", ";bottom:0;content:'';left:0;position:absolute;right:0;top:0;z-index:0;}&::after{", ";", ";background:", ";bottom:2px;content:'';left:2px;position:absolute;right:2px;top:2px;z-index:-5;}"], hover && (0, _styledComponents.css)(["cursor:pointer;&:hover{&::after{transition:box-shadow ease 125ms;", ";}}"], (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation10)), (0, _CommonStyles.flexFlow)(), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Large), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), cssOverrides, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Medium), (0, _CommonStyles.getElevation)(elevation), (0, _CommonStyles.colors)(_CommonStyles.Colors.White)));
 exports.BBCardBackground = BBCardBackground;
+
 const BBCardHeaderContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Cards__BBCardHeaderContainer",
-  componentId: "mqkraz-2"
-})(["", ";align-items:center;flex-shrink:0;height:32px;padding:0 16px;position:relative;", ";"], (0, _CommonStyles.flexFlow)('row'), ({
+  componentId: "mqkraz-1"
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";align-items:center;flex-shrink:0;height:32px;padding:0 16px;position:relative;", ";"], (0, _CommonStyles.flexFlow)('row'), cssOverrides));
+
 const BBCardHeaderTitle =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "Cards__BBCardHeaderTitle",
-  componentId: "mqkraz-3"
+  componentId: "mqkraz-2"
 })(["", ";margin:0;"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5));
+
 const StyledAppIconLeft =
 /*#__PURE__*/
 (0, _styledComponents.default)(_AppIcon.AppIcon).withConfig({
   displayName: "Cards__StyledAppIconLeft",
-  componentId: "mqkraz-4"
+  componentId: "mqkraz-3"
 })(["margin-right:16px;"]);
 const StyledIconLeft =
 /*#__PURE__*/
 (0, _styledComponents.default)(_Icon.Icon).withConfig({
   displayName: "Cards__StyledIconLeft",
-  componentId: "mqkraz-5"
+  componentId: "mqkraz-4"
 })(["margin-right:16px;"]);
 const StyledIconRight =
 /*#__PURE__*/
 (0, _styledComponents.default)(_Icon.Icon).withConfig({
   displayName: "Cards__StyledIconRight",
-  componentId: "mqkraz-6"
+  componentId: "mqkraz-5"
 })(["margin-left:16px;"]);
+
 const BBCardBottomBorder =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Cards__BBCardBottomBorder",
-  componentId: "mqkraz-7"
-})(["", ";bottom:0;height:1px;left:0;position:absolute;right:0;"], ({
+  componentId: "mqkraz-6"
+})(({
   accentColor
-}) => (0, _styledComponents.css)(["background:linear-gradient( to right,", " 0,", " 16px,", " calc(100% - 16px),", " 100% );"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0), accentColor, accentColor, (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0)));
+}) => (0, _styledComponents.css)(["background:linear-gradient( to right,", " 0,", " 16px,", " calc(100% - 16px),", " 100% );bottom:0;height:1px;left:0;position:absolute;right:0;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0), accentColor, accentColor, (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0)));
 
 // building-blocks/cards/header
 const BBCardHeader = ({
@@ -117,14 +117,15 @@ const BBCardHeader = ({
 
 
 exports.BBCardHeader = BBCardHeader;
+
 const BBCardGrid =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Cards__BBCardGrid",
-  componentId: "mqkraz-8"
-})(["display:grid;flex-grow:1;grid-auto-rows:max-content;grid-template-columns:repeat( auto-fill,", "px );justify-content:center;padding:20px 32px 14px;display:-ms-flexbox;flex-flow:row wrap;align-content:flex-start;", ";"], ({
+  componentId: "mqkraz-7"
+})(({
+  cssOverrides,
   cardWidth = 272
-}) => cardWidth, ({
-  cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["display:grid;flex-grow:1;grid-auto-rows:max-content;grid-template-columns:repeat(auto-fill,", "px);justify-content:center;padding:20px 32px 14px;display:-ms-flexbox;flex-flow:row wrap;align-content:flex-start;align-items:flex-start;", ";"], cardWidth, cssOverrides));
+
 exports.BBCardGrid = BBCardGrid;
\ No newline at end of file
diff --git a/dist/commonStyles/zindex.d.ts b/dist/commonStyles/zindex.d.ts
new file mode 100644
index 000000000..bce5ab386
--- /dev/null
+++ b/dist/commonStyles/zindex.d.ts
@@ -0,0 +1,6 @@
+export declare enum ZIndexNodeName {
+    SidebarContainer = "SidebarContainer",
+    NewFlowSection = "NewFlowSection",
+    NewFlowSectionAfter = "NewFlowSectionAfter"
+}
+export declare const zIndex: (nodeName: ZIndexNodeName) => "z-index: 10;" | "z-index: 5;" | "z-index: -5;" | "z-index: 0;";
diff --git a/dist/commonStyles/zindex.js b/dist/commonStyles/zindex.js
new file mode 100644
index 000000000..ca5fa88be
--- /dev/null
+++ b/dist/commonStyles/zindex.js
@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.zIndex = exports.ZIndexNodeName = void 0;
+let ZIndexNodeName;
+exports.ZIndexNodeName = ZIndexNodeName;
+
+(function (ZIndexNodeName) {
+  ZIndexNodeName["SidebarContainer"] = "SidebarContainer";
+  ZIndexNodeName["NewFlowSection"] = "NewFlowSection";
+  ZIndexNodeName["NewFlowSectionAfter"] = "NewFlowSectionAfter";
+})(ZIndexNodeName || (exports.ZIndexNodeName = ZIndexNodeName = {}));
+
+const zIndex = nodeName => {
+  switch (nodeName) {
+    case ZIndexNodeName.SidebarContainer:
+      return 'z-index: 10;';
+
+    case ZIndexNodeName.NewFlowSection:
+      return 'z-index: 5;';
+
+    case ZIndexNodeName.NewFlowSectionAfter:
+      return 'z-index: -5;';
+
+    default:
+      return 'z-index: 0;';
+  }
+};
+
+exports.zIndex = zIndex;
\ No newline at end of file
diff --git a/dist/dataTable/DataTable.d.ts b/dist/dataTable/DataTable.d.ts
index 70773ddb6..ed52811f1 100644
--- a/dist/dataTable/DataTable.d.ts
+++ b/dist/dataTable/DataTable.d.ts
@@ -1,5 +1,3 @@
-/// <reference path="../../src/typings/cssprop.d.ts" />
-/// <reference types="react" />
 import { CommonComponentType } from '@monorail/types';
 declare type TableSizeType = {
     singleCollection?: boolean;
@@ -11,18 +9,16 @@ declare type TableDataType = {
     flex?: number | string;
     width?: number;
 };
-export declare const TableContainer: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableHeaderContainer: import("styled-components").StyledComponentClass<CommonComponentType & TableSizeType, any, CommonComponentType & TableSizeType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableHeaderData: import("styled-components").StyledComponentClass<CommonComponentType & TableDataType & {
+export declare const TableContainer: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
+export declare const TableHeaderContainer: import("styled-components").StyledComponent<"div", any, CommonComponentType & TableSizeType, never>;
+export declare const TableHeaderData: import("styled-components").StyledComponent<"div", any, CommonComponentType & TableDataType & {
     hasSorter?: boolean | undefined;
-}, any, CommonComponentType & TableDataType & {
-    hasSorter?: boolean | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableBody: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableRowContainer: import("styled-components").StyledComponentClass<CommonComponentType & TableSizeType, any, CommonComponentType & TableSizeType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableRowData: import("styled-components").StyledComponentClass<CommonComponentType & TableDataType, any, CommonComponentType & TableDataType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableRowGroupHeader: import("styled-components").StyledComponentClass<CommonComponentType & TableSizeType, any, CommonComponentType & TableSizeType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableEmptyMessage: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-export declare const TableFooterContainer: import("styled-components").StyledComponentClass<CommonComponentType & TableSizeType, any, CommonComponentType & TableSizeType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const TableFooterMeta: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+}, never>;
+export declare const TableBody: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
+export declare const TableRowContainer: import("styled-components").StyledComponent<"div", any, CommonComponentType & TableSizeType, never>;
+export declare const TableRowData: import("styled-components").StyledComponent<"div", any, CommonComponentType & TableDataType, never>;
+export declare const TableRowGroupHeader: import("styled-components").StyledComponent<"div", any, CommonComponentType & TableSizeType, never>;
+export declare const TableEmptyMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableFooterContainer: import("styled-components").StyledComponent<"div", any, CommonComponentType & TableSizeType, never>;
+export declare const TableFooterMeta: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
 export {};
diff --git a/dist/dataTable/DataTable.js b/dist/dataTable/DataTable.js
index a8a290035..a55b9553b 100644
--- a/dist/dataTable/DataTable.js
+++ b/dist/dataTable/DataTable.js
@@ -41,20 +41,22 @@ const tableDataStyles = ({
 
 const TableContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableContainer",
   componentId: "sc-18e9kui-0"
-})(["", ";height:100%;overflow:hidden;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides); // Header Components
+}) => (0, _styledComponents.css)(["", ";height:100%;overflow:hidden;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides)); // Header Components
+
 
 exports.TableContainer = TableContainer;
+
 const TableHeaderContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableHeaderContainer",
   componentId: "sc-18e9kui-1"
-})(["", ";"], ({
+})(({
   collapsible = false,
   cssOverrides,
   dense = false,
@@ -64,13 +66,15 @@ const TableHeaderContainer =
   dense,
   collapsible
 }), (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94), cssOverrides));
+
 exports.TableHeaderContainer = TableHeaderContainer;
+
 const TableHeaderData =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableHeaderData",
   componentId: "sc-18e9kui-2"
-})(["", ";"], ({
+})(({
   cssOverrides,
   flex,
   hasSorter = false,
@@ -82,22 +86,26 @@ const TableHeaderData =
   flex
 }), hasSorter && (0, _styledComponents.css)(["cursor:pointer;user-select:none;&:hover{background:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94)), cssOverrides)); // Body Components
 
+
 exports.TableHeaderData = TableHeaderData;
+
 const TableBody =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableBody",
   componentId: "sc-18e9kui-3"
-})(["", ";flex:1 1 100%;overflow-y:auto;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";flex:1 1 100%;overflow-y:auto;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
+
 exports.TableBody = TableBody;
+
 const TableRowContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableRowContainer",
   componentId: "sc-18e9kui-4"
-})(["", ";"], ({
+})(({
   collapsible = false,
   cssOverrides,
   dense = false,
@@ -107,13 +115,15 @@ const TableRowContainer =
   dense,
   collapsible
 }), dense ? 32 : 40, (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey96), cssOverrides));
+
 exports.TableRowContainer = TableRowContainer;
+
 const TableRowData =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableRowData",
   componentId: "sc-18e9kui-5"
-})(["", ";"], ({
+})(({
   textAlign,
   width,
   flex,
@@ -123,13 +133,15 @@ const TableRowData =
   width,
   flex
 }), cssOverrides));
+
 exports.TableRowData = TableRowData;
+
 const TableRowGroupHeader =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableRowGroupHeader",
   componentId: "sc-18e9kui-6"
-})(["", ";"], ({
+})(({
   collapsible = false,
   cssOverrides,
   dense = false,
@@ -139,6 +151,7 @@ const TableRowGroupHeader =
   dense,
   collapsible
 }), cssOverrides));
+
 exports.TableRowGroupHeader = TableRowGroupHeader;
 
 const TableEmptyMessage =
@@ -150,12 +163,13 @@ _styledComponents.default.div.withConfig({
 
 
 exports.TableEmptyMessage = TableEmptyMessage;
+
 const TableFooterContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableFooterContainer",
   componentId: "sc-18e9kui-8"
-})(["", ";"], ({
+})(({
   collapsible = false,
   cssOverrides,
   dense = false,
@@ -165,11 +179,16 @@ const TableFooterContainer =
   dense,
   collapsible
 }), (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey99), cssOverrides));
+
 exports.TableFooterContainer = TableFooterContainer;
+
 const TableFooterMeta =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "DataTable__TableFooterMeta",
   componentId: "sc-18e9kui-9"
-})(["", ";color:", ";margin-left:auto;"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74));
+})(({
+  cssOverrides
+}) => (0, _styledComponents.css)(["", ";color:", ";margin-left:auto;", ";"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74), cssOverrides));
+
 exports.TableFooterMeta = TableFooterMeta;
\ No newline at end of file
diff --git a/dist/divider/Divider.d.ts b/dist/divider/Divider.d.ts
index 0b107629a..037489cf6 100644
--- a/dist/divider/Divider.d.ts
+++ b/dist/divider/Divider.d.ts
@@ -1,8 +1,5 @@
-import React from 'react';
 import { CommonComponentType } from '@monorail/types';
-export declare const Divider: import("styled-components").StyledComponentClass<CCDividerProps, any, CommonComponentType & {
-    isVertical?: boolean | undefined;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const Divider: import("styled-components").StyledComponent<"div", any, CCDividerProps, never>;
 declare type CCDividerProps = CommonComponentType & {
     isVertical?: boolean;
 };
diff --git a/dist/divider/Divider.js b/dist/divider/Divider.js
index 012c42555..bb3b3381a 100644
--- a/dist/divider/Divider.js
+++ b/dist/divider/Divider.js
@@ -16,12 +16,13 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 */
 const Divider =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Divider",
   componentId: "sc-1pggcc1-0"
-})(["", ";background:", ";"], ({
-  isVertical = false
-}) => isVertical ? (0, _styledComponents.css)(["width:1px height:100%;"]) : (0, _styledComponents.css)(["width:100%;height:1px;"]), (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94));
+})(({
+  isVertical
+}) => (0, _styledComponents.css)(["", ";background:", ";"], isVertical ? (0, _styledComponents.css)(["width:1px height:100%;"]) : (0, _styledComponents.css)(["width:100%;height:1px;"]), (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94)));
+
 exports.Divider = Divider;
 Divider.defaultProps = {
   isVertical: false
diff --git a/dist/errorPage/ErrorPage.d.ts b/dist/errorPage/ErrorPage.d.ts
index ce87fc68d..29e2c6521 100644
--- a/dist/errorPage/ErrorPage.d.ts
+++ b/dist/errorPage/ErrorPage.d.ts
@@ -1,9 +1,9 @@
 import { Component, ReactNode } from 'react';
 import { ErrorType } from '@monorail/errorPage/errorTypes';
 declare type ErrorPageProps = {
+    errorMessage?: ReactNode;
     errorType: ErrorType;
     title?: ReactNode;
-    errorMessage?: ReactNode;
 };
 export declare class ErrorPage extends Component<ErrorPageProps> {
     static defaultProps: {
diff --git a/dist/errorPage/ErrorPage.js b/dist/errorPage/ErrorPage.js
index 3bfce61d8..7a7abae9d 100644
--- a/dist/errorPage/ErrorPage.js
+++ b/dist/errorPage/ErrorPage.js
@@ -9,12 +9,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _errorTypes = require("./errorTypes");
+
 var _Icon = require("../icon/Icon");
 
 var _CommonStyles = require("../CommonStyles");
 
-var _errorTypes = require("./errorTypes");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -24,44 +24,50 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 */
 const CCErrorPage =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "ErrorPage__CCErrorPage",
   componentId: "r46uot-0"
-})(["", ";justify-content:center;align-items:center;width:100%;height:100%;"], (0, _CommonStyles.flexFlow)('column'));
+})(["", ";align-items:center;height:100%;justify-content:center;width:100%;"], (0, _CommonStyles.flexFlow)('column'));
+
 const IconCircle =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "ErrorPage__IconCircle",
   componentId: "r46uot-1"
-})(["", ";width:120px;height:120px;background:#ed6d6e;border-radius:50%;"], (0, _CommonStyles.flexFlow)('column'));
+})(["", ";background:#ed6d6e;border-radius:50%;height:120px;width:120px;"], (0, _CommonStyles.flexFlow)('column'));
+
 const StyledIcon =
 /*#__PURE__*/
 (0, _styledComponents.default)(_Icon.Icon).withConfig({
   displayName: "ErrorPage__StyledIcon",
   componentId: "r46uot-2"
 })(["color:", ";margin:auto auto;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White));
+
 const FourZeroFourIcon =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "ErrorPage__FourZeroFourIcon",
   componentId: "r46uot-3"
 })(["color:#ed6d6e;font-size:88px;font-weight:500;margin:auto auto;"]);
+
 const Title =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "ErrorPage__Title",
   componentId: "r46uot-4"
 })(["", ";color:", ";margin:32px 0 32px 0;"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title1), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89));
+
 const ErrorMessage =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "ErrorPage__ErrorMessage",
   componentId: "r46uot-5"
-})(["", ";color:", ";text-align:center;width:100%;max-width:448px;"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title3), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89));
+})(["", ";color:", ";max-width:448px;text-align:center;width:100%;"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title3), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89));
 /*
 * Types
 */
 
+
 /*
 * Components
 */
diff --git a/dist/filters/BasicFilterController.d.ts b/dist/filters/BasicFilterController.d.ts
index 928a98449..5d473ba08 100644
--- a/dist/filters/BasicFilterController.d.ts
+++ b/dist/filters/BasicFilterController.d.ts
@@ -1,5 +1,5 @@
 import React, { Component, ReactNode } from 'react';
-export declare const ChoiceSorterCss: import("styled-components").InterpolationValue[];
+export declare const ChoiceSorterCss: import("styled-components").FlattenSimpleInterpolation;
 export declare type BasicOption = {
     label: string;
     value: string;
@@ -50,7 +50,7 @@ export declare class BasicSorterController extends Component<BasicSorterControll
     state: TitleState;
     getTitle: () => React.ReactNode;
     updateTitle: () => void;
-    sorterItemStyle: (selected: boolean) => false | import("styled-components").InterpolationValue[];
+    sorterItemStyle: (selected: boolean) => false | import("styled-components").FlattenSimpleInterpolation;
     onSorterChange: (key: string) => void;
     componentDidMount: () => void;
     render(): React.ReactNode;
diff --git a/dist/filters/Filter.d.ts b/dist/filters/Filter.d.ts
index b6e254617..834970300 100644
--- a/dist/filters/Filter.d.ts
+++ b/dist/filters/Filter.d.ts
@@ -10,6 +10,7 @@ declare type Props = CCFilterProps & {
     document?: Document;
     title: ReactNode;
     content: ReactNode;
+    zIndex?: number;
 };
 export declare class Filter extends Component<Props> {
     render(): JSX.Element;
diff --git a/dist/filters/Filter.js b/dist/filters/Filter.js
index ea2f74e62..d41b34d9e 100644
--- a/dist/filters/Filter.js
+++ b/dist/filters/Filter.js
@@ -7,7 +7,7 @@ exports.Filter = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -25,21 +25,22 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const CCFilter =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Filter__CCFilter",
   componentId: "sc-131i0x6-0"
-})(["", ";", ";", ";", ";align-items:center;cursor:pointer;height:24px;padding:0 4px 0 8px;user-select:none;flex-shrink:0;", ";"], ({
+})(({
   isOpen,
-  isActive
-}) => isActive || isOpen ? (0, _CommonStyles.basePrimaryStyles)(_CommonStyles.Colors.BrandDarkBlue) : (0, _styledComponents.css)(["", ";color:", ";"], (0, _CommonStyles.baseSecondaryStyles)(_CommonStyles.Colors.BrandDarkBlue, isOpen), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74)), (0, _CommonStyles.borderRadius)(), _CommonStyles.buttonTransition, (0, _CommonStyles.flexFlow)('row'), ({
+  isActive,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";", ";", ";align-items:center;cursor:pointer;height:24px;padding:0 4px 0 8px;user-select:none;flex-shrink:0;", ";"], isActive || isOpen ? (0, _CommonStyles.basePrimaryStyles)(_CommonStyles.Colors.BrandDarkBlue) : (0, _styledComponents.css)(["", ";color:", ";"], (0, _CommonStyles.baseSecondaryStyles)(_CommonStyles.Colors.BrandDarkBlue, isOpen), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74)), (0, _CommonStyles.borderRadius)(), _CommonStyles.buttonTransition, (0, _CommonStyles.flexFlow)('row'), cssOverrides));
+
 const FilterText =
 /*#__PURE__*/
-(0, _styledComponents.default)('span').withConfig({
+_styledComponents.default.span.withConfig({
   displayName: "Filter__FilterText",
   componentId: "sc-131i0x6-1"
 })(["", ";color:currentColor;text-transform:uppercase;white-space:nowrap;"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5));
+
 const FilterIcon =
 /*#__PURE__*/
 (0, _styledComponents.default)(_Icon.Icon).withConfig({
@@ -54,6 +55,7 @@ class Filter extends _react.Component {
       title,
       content,
       isActive,
+      zIndex,
       ...otherProps
     } = this.props;
     return _react.default.createElement(_PopOver.PopOver, _extends({}, otherProps, {
@@ -63,7 +65,9 @@ class Filter extends _react.Component {
       }), _react.default.createElement(FilterText, null, title), _react.default.createElement(FilterIcon, {
         icon: "arrow_drop_down"
       })),
-      popOver: props => !(0, _primitiveGuards.isNil)(content) && _react.default.createElement(_Menu.Menu, props, content)
+      popOver: props => !(0, _typeGuards.isNil)(content) && _react.default.createElement(_Menu.Menu, _extends({
+        zIndex: zIndex
+      }, props), content)
     }));
   }
 
diff --git a/dist/filters/FilterBar.js b/dist/filters/FilterBar.js
index 860f410d7..a9701a87d 100644
--- a/dist/filters/FilterBar.js
+++ b/dist/filters/FilterBar.js
@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FilterBar = void 0;
 
-var _Record = require("../CoreUtils/Record");
+var _Record = require("../sharedHelpers/fp-ts-ext/Record");
 
-var _Array = require("../CoreUtils/Array");
+var _Array = require("../sharedHelpers/fp-ts-ext/Array");
 
-var _Option = require("../CoreUtils/Option");
+var _Option = require("../sharedHelpers/fp-ts-ext/Option");
 
 var _Array2 = require("fp-ts/lib/Array");
 
@@ -17,7 +17,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _CommonStyles = require("../CommonStyles");
+var _Button = require("../buttons/Button");
+
+var _buttonTypes = require("../buttons/buttonTypes");
+
+var _Choice = require("../inputs/Choice");
 
 var _StyleHelpers = require("../StyleHelpers");
 
@@ -25,13 +29,9 @@ var _Filter = require("./Filter");
 
 var _Search = require("../inputs/Search");
 
-var _Choice = require("../inputs/Choice");
-
 var _Status = require("../status/Status");
 
-var _Button = require("../buttons/Button");
-
-var _buttonTypes = require("../buttons/buttonTypes");
+var _CommonStyles = require("../CommonStyles");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
@@ -39,12 +39,12 @@ const sorterItemStyle = selected => (0, _styledComponents.css)(["", ";cursor:poi
 
 const BBFilterBar =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "FilterBar__BBFilterBar",
   componentId: "sc-1g2tevy-0"
-})(["", ";margin-left:-4px;", ";"], (0, _CommonStyles.flexFlow)('row'), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";margin-left:-4px;", ";"], (0, _CommonStyles.flexFlow)('row'), cssOverrides));
 
 class FilterBar extends _react.Component {
   constructor(...args) {
@@ -60,7 +60,8 @@ class FilterBar extends _react.Component {
           cssOverrides: (0, _styledComponents.css)(["margin-left:4px;"])
         }, filterGroup.activeFilterCount));
       } else if (filterGroup.activeFilterCount === 1) {
-        const headFilterOpt = (0, _Array2.head)(filterGroup.filters);
+        // Get checked filter option
+        const headFilterOpt = (0, _Array2.head)(filterGroup.filters.filter(item => item.checked));
         const activeFilterLabel = (0, _Option.fold)(headFilterOpt, '', (0, _Record.prop)('label')); // If equal to 1, show the label and the single active filter
 
         return `${filterGroup.label} - ${activeFilterLabel}`;
diff --git a/dist/filters/FilterCollection.d.ts b/dist/filters/FilterCollection.d.ts
index 8a6bf19c0..4a335376a 100644
--- a/dist/filters/FilterCollection.d.ts
+++ b/dist/filters/FilterCollection.d.ts
@@ -44,7 +44,7 @@ declare type State<CollectionItem> = {
 export declare class FilterCollection<CollectionItem extends object, SearchByKey extends keyof CollectionItem & string, FilterKey extends keyof CollectionItem & string> extends Component<Props<CollectionItem, SearchByKey, FilterKey>, State<CollectionItem>> {
     initialFilterState: FilterState;
     state: State<CollectionItem>;
-    mkStatePropLens: <P extends "sorterGroup" | "searchText" | "filterState">(prop: P) => Lens<State<CollectionItem>, State<CollectionItem>[P]>;
+    mkStatePropLens: <P extends "searchText" | "sorterGroup" | "filterState">(prop: P) => Lens<State<CollectionItem>, State<CollectionItem>[P]>;
     stateToFilterStateLens: Lens<State<CollectionItem>, Record<string, Record<string, boolean>>>;
     stateToSearchTextLens: Lens<State<CollectionItem>, string>;
     stateToSorterGroupOptional: Optional<State<CollectionItem>, SorterGroup<CollectionItem>>;
diff --git a/dist/filters/FilterCollection.js b/dist/filters/FilterCollection.js
index fa2962bba..41ac7d95a 100644
--- a/dist/filters/FilterCollection.js
+++ b/dist/filters/FilterCollection.js
@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FilterCollection = exports.createFilterGroup = void 0;
 
-var _IO = require("../CoreUtils/IO");
+var _IO = require("../sharedHelpers/fp-ts-ext/IO");
 
-var _general = require("../CoreUtils/general");
+var _function = require("../sharedHelpers/fp-ts-ext/function");
 
-var _optics = require("../CoreUtils/optics");
+var _optics = require("../sharedHelpers/optics");
 
-var _String = require("../CoreUtils/String");
+var _strings = require("../sharedHelpers/strings");
 
-var _Array = require("../CoreUtils/Array");
+var _Array = require("../sharedHelpers/fp-ts-ext/Array");
 
-var _Option = require("../CoreUtils/Option");
+var _Option = require("../sharedHelpers/fp-ts-ext/Option");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 var _Array2 = require("fp-ts/lib/Array");
 
-var _function = require("fp-ts/lib/function");
+var _function2 = require("fp-ts/lib/function");
 
 var _Option2 = require("fp-ts/lib/Option");
 
@@ -72,9 +72,9 @@ class FilterCollection extends _react.Component {
       } : s;
 
       const transition = this.stateToSortersOptional.modify((0, _Array.map)(toggleSelected));
-      const setStateIO = (0, _IO.mkIO)(() => this.setState(transition));
-      const constSetStateIO = (0, _function.constant)(setStateIO);
-      const noOpIO = (0, _IO.mkIO)(_general.constVoid);
+      const setStateIO = (0, _IO.newIO)(() => this.setState(transition));
+      const constSetStateIO = (0, _function2.constant)(setStateIO);
+      const noOpIO = (0, _IO.newIO)(_function.constVoid);
       const onSorterChangeIO = sorterGroupOpt.fold(noOpIO, constSetStateIO);
       (0, _IO.runIO)(onSorterChangeIO);
     };
@@ -82,19 +82,19 @@ class FilterCollection extends _react.Component {
     this.onFilterChange = (groupKey, filterKey, value) => {
       const stateToFilterKeyOptional = this.stateToFilterStateLens.composeOptional((0, _optics.mkRecordKeyOptional)(groupKey)).composeOptional((0, _optics.mkRecordKeyOptional)(filterKey));
       const transition = stateToFilterKeyOptional.set(value);
-      const setStateIO = (0, _IO.mkIO)(() => this.setState(transition));
+      const setStateIO = (0, _IO.newIO)(() => this.setState(transition));
       (0, _IO.runIO)(setStateIO);
     };
 
     this.resetFilters = () => {
       const transition = this.stateToFilterStateLens.set(this.initialFilterState);
-      const setStateIO = (0, _IO.mkIO)(() => this.setState(transition));
+      const setStateIO = (0, _IO.newIO)(() => this.setState(transition));
       (0, _IO.runIO)(setStateIO);
     };
 
     this.onSearchChange = searchText => {
       const transition = this.stateToSearchTextLens.set(searchText);
-      const setStateIO = (0, _IO.mkIO)(() => this.setState(transition));
+      const setStateIO = (0, _IO.newIO)(() => this.setState(transition));
       (0, _IO.runIO)(setStateIO);
     };
 
@@ -111,7 +111,7 @@ class FilterCollection extends _react.Component {
         filterState
       } = this.state; // sanitize search text
 
-      const sanitizedSearchText = (0, _String.toLocaleLower)(searchText); // Here we loop through all the filter groups and filter out the
+      const sanitizedSearchText = (0, _strings.toLower)(searchText); // Here we loop through all the filter groups and filter out the
       // filters that are unchecked. This is an optimization so
       // we don't need to do this work every time in the below map
 
@@ -137,8 +137,8 @@ class FilterCollection extends _react.Component {
       const filtered = _Array2.array.filter(catalog, catalogItem => {
         // If search exists and item does not match, filter it out
         const searchValue = catalogItem[searchByKey];
-        const findIndexLocaleLower = (0, _general.o)((0, _String.findIndex)(sanitizedSearchText), _String.toLocaleLower);
-        const isNotFound = (0, _general.o)(x => (0, _Option2.isNone)(x), findIndexLocaleLower);
+        const findIndexLocaleLower = (0, _function.o)((0, _strings.findIndex)(sanitizedSearchText), _strings.toLower);
+        const isNotFound = (0, _function.o)(x => (0, _Option2.isNone)(x), findIndexLocaleLower);
 
         if (typeof searchValue !== 'string') {
           console.error('tried to search non-string value'); // tslint:disable-line:no-console
@@ -156,9 +156,9 @@ class FilterCollection extends _react.Component {
             const target = group.filterKey;
             const value = catalogItem[target];
 
-            if ((0, _primitiveGuards.isNil)(group.transform) && typeof value === 'string') {
+            if ((0, _typeGuards.isNil)(group.transform) && typeof value === 'string') {
               return filterTerm === value;
-            } else if (!(0, _primitiveGuards.isNil)(group.transform)) {
+            } else if (!(0, _typeGuards.isNil)(group.transform)) {
               return filterTerm === group.transform(value);
             } else {
               const errorMsg = `error: lookup value for ${group.filterKey}` + `must be a string, but received a ${typeof value} (${value})`;
diff --git a/dist/header/Header.d.ts b/dist/header/Header.d.ts
index 984e7ceab..1cc30f86f 100644
--- a/dist/header/Header.d.ts
+++ b/dist/header/Header.d.ts
@@ -8,9 +8,7 @@ declare type Props = CommonComponentType & {
     cssHeaderRow?: SimpleInterpolation;
     iconLeft?: string;
     noBorder?: boolean;
-    title: string;
+    title: ReactNode;
 };
-export declare const Header: import("styled-components").StyledComponentClass<Props, any, Pick<Props, "title" | "id" | "cssOverrides" | "className" | "as" | "tabIndex" | "appIcon" | "iconLeft" | "noBorder" | "actions" | "cssHeaderRow"> & {
-    theme?: any;
-}>;
+export declare const Header: import("styled-components").StyledComponent<({ actions, appIcon, children, cssOverrides, cssHeaderRow, iconLeft, noBorder, title, ...otherProps }: any) => JSX.Element, any, Props, never>;
 export {};
diff --git a/dist/header/Header.js b/dist/header/Header.js
index c7e8ece66..620facb8c 100644
--- a/dist/header/Header.js
+++ b/dist/header/Header.js
@@ -24,9 +24,9 @@ const HeaderRow =
 _styledComponents.default.div.withConfig({
   displayName: "Header__HeaderRow",
   componentId: "muzh11-0"
-})(["color:", ";", ";", ";align-items:center;flex-shrink:0;height:48px;padding:0 16px;", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title3), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["color:", ";", ";", ";align-items:center;flex-shrink:0;height:48px;padding:0 16px;", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title3), cssOverrides));
 
 const iconRightCss =
 /*#__PURE__*/
@@ -54,10 +54,7 @@ const Header =
 }), iconLeft && _react.default.createElement(_Icon.Icon, {
   cssOverrides: iconRightCss,
   icon: iconLeft
-}), title, actions), children)).withConfig({
-  displayName: "Header",
-  componentId: "muzh11-1"
-})(["", ";"], ({
+}), title, actions), children))(({
   noBorder,
   appIcon,
   cssOverrides
diff --git a/dist/icon/Icon.d.ts b/dist/icon/Icon.d.ts
index 573cdd75a..c79d1d027 100644
--- a/dist/icon/Icon.d.ts
+++ b/dist/icon/Icon.d.ts
@@ -1,10 +1,8 @@
 import { MouseEvent } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 import { Omit } from 'typelevel-ts';
-export declare const MaterialIconFontFace: import("styled-components").GlobalStyleClass<{}, import("styled-components").DefaultTheme>;
-export declare const Icon: import("styled-components").StyledComponentClass<IconProps, any, Pick<IconProps, "cssOverrides" | "icon" | "className" | "onClick" | "size"> & {
-    theme?: any;
-}>;
+export declare const MaterialIconFontFace: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export declare const Icon: import("styled-components").StyledComponent<({ cssOverrides: _cssOverrides, icon, ...otherProps }: IconProps) => JSX.Element, any, IconProps, never>;
 export declare type IconProps = {
     className?: string;
     cssOverrides?: SimpleInterpolation;
diff --git a/dist/icon/Icon.js b/dist/icon/Icon.js
index ca4d1ec6b..f8391f4b9 100644
--- a/dist/icon/Icon.js
+++ b/dist/icon/Icon.js
@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Icon = exports.MaterialIconFontFace = void 0;
 
-var _CommonStyles = require("../CommonStyles");
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Academy = require("./custom/Academy");
 
@@ -19,16 +21,24 @@ var _ChevronDoubleLeft = require("./custom/ChevronDoubleLeft");
 
 var _CircleArrowLeft = require("./custom/CircleArrowLeft");
 
+var _CommonStyles = require("../CommonStyles");
+
 var _Dashboard = require("./custom/Dashboard");
 
 var _ErrorRobot = require("./custom/ErrorRobot");
 
+var _EventDesign = require("./custom/EventDesign");
+
+var _Events = require("./custom/Events");
+
 var _Filter = require("./custom/Filter");
 
 var _Gauge = require("./custom/Gauge");
 
 var _Hardhat = require("./custom/Hardhat");
 
+var _Home = require("./custom/Home");
+
 var _Impact = require("./custom/Impact");
 
 var _LMS = require("./custom/LMS");
@@ -37,6 +47,8 @@ var _Range = require("./custom/Range");
 
 var _Retry = require("./custom/Retry");
 
+var _Robot = require("./custom/Robot");
+
 var _ServerNetwork = require("./custom/ServerNetwork");
 
 var _SortAscending = require("./custom/SortAscending");
@@ -59,10 +71,6 @@ var _Unscored = require("./custom/Unscored");
 
 var _VCenter = require("./custom/VCenter");
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -86,34 +94,38 @@ _styledComponents.createGlobalStyle`
 
 exports.MaterialIconFontFace = MaterialIconFontFace;
 const customIcons = {
-  academy: _Academy.Academy,
-  admin: _Admin.Admin,
-  catalog: _Catalog.Catalog,
+  'academy-app': _Academy.Academy,
+  'admin-app': _Admin.Admin,
+  'catalog-app': _Catalog.Catalog,
+  'dashboard-app': _Dashboard.Dashboard,
+  'event-design-app': _EventDesign.EventDesign,
+  'events-app': _Events.Events,
+  'externalLms-app': _LMS.LMS,
+  'hardhat-app': _Hardhat.Hardhat,
+  'home-app': _Home.Home,
+  'impact-app': _Impact.Impact,
+  'range-app': _Range.Range,
+  'repo-app': _Catalog.Catalog,
+  'techops-app': _TechOps.TechOps,
+  'tracker-app': _Tracker.Tracker,
+  'training-app': _Academy.Academy,
   certificate: _Certificate.Certificate,
   chevron_double_left: _ChevronDoubleLeft.ChevronDoubleLeft,
   circle_arrow_left: _CircleArrowLeft.CircleArrowLeft,
-  dashboard: _Dashboard.Dashboard,
   errorRobot: _ErrorRobot.ErrorRobot,
-  externalLms: _LMS.LMS,
   filter: _Filter.Filter,
   gauge: _Gauge.Gauge,
-  hardhat: _Hardhat.Hardhat,
-  impact: _Impact.Impact,
-  range: _Range.Range,
-  repo: _Catalog.Catalog,
+  retry: _Retry.Retry,
+  robot: _Robot.Robot,
   server_network: _ServerNetwork.ServerNetwork,
   sort_ascending: _SortAscending.SortAscending,
   sort_descending: _SortDescending.SortDescending,
-  techops: _TechOps.TechOps,
-  threeGears: _ThreeGears.ThreeGears,
-  tracker: _Tracker.Tracker,
-  training: _Academy.Academy,
-  unscored: _Unscored.Unscored,
-  vcenter: _VCenter.VCenter,
-  retry: _Retry.Retry,
   star_filled: _StarFilled.StarFilled,
+  star_half: _StarHalf.StarHalf,
   star_outline: _StarOutline.StarOutline,
-  star_half: _StarHalf.StarHalf
+  threeGears: _ThreeGears.ThreeGears,
+  unscored: _Unscored.Unscored,
+  vcenter: _VCenter.VCenter
 };
 const Icon =
 /*#__PURE__*/
@@ -122,19 +134,15 @@ const Icon =
   icon,
   ...otherProps
 }) => {
-  const CustomIcon = customIcons[icon];
+  const CustomIcon = customIcons[icon] || (0, _CommonStyles.isAppName)(icon) && customIcons[`${(0, _CommonStyles.convertAppNameToString)(icon)}-app`];
 
   if (CustomIcon) {
     return _react.default.createElement(CustomIcon, otherProps);
   }
 
   return _react.default.createElement("i", otherProps, icon);
-}).withConfig({
-  displayName: "Icon",
-  componentId: "sc-17ga27i-0"
-})(["", ";color:", ";direction:ltr;display:inline-block;fill:currentColor;flex-shrink:0;font-family:'Material Icons';font-style:normal;font-weight:normal;height:1em;letter-spacing:normal;line-height:1;text-transform:none;user-select:none;white-space:nowrap;width:1em;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';", ";"], ({
-  size
-}) => size ? (0, _styledComponents.css)(["font-size:", "px;"], size) : (0, _styledComponents.css)(["font-size:16px;"]), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), ({
+})(({
+  size,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";color:", ";direction:ltr;display:inline-block;fill:currentColor;flex-shrink:0;font-family:'Material Icons';font-style:normal;font-weight:normal;height:1em;letter-spacing:normal;line-height:1;text-transform:none;user-select:none;white-space:nowrap;width:1em;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';", ";"], size ? (0, _styledComponents.css)(["font-size:", "px;"], size) : (0, _styledComponents.css)(["font-size:16px;"]), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), cssOverrides));
 exports.Icon = Icon;
\ No newline at end of file
diff --git a/dist/icon/custom/EventDesign.d.ts b/dist/icon/custom/EventDesign.d.ts
new file mode 100644
index 000000000..c726f2844
--- /dev/null
+++ b/dist/icon/custom/EventDesign.d.ts
@@ -0,0 +1,3 @@
+import { ComponentType } from 'react';
+import { CustomIconProps } from '@monorail/icon/Icon';
+export declare const EventDesign: ComponentType<CustomIconProps>;
diff --git a/dist/icon/custom/EventDesign.js b/dist/icon/custom/EventDesign.js
new file mode 100644
index 000000000..aa0c6b9a9
--- /dev/null
+++ b/dist/icon/custom/EventDesign.js
@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EventDesign = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const EventDesign = props => _react.default.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _react.default.createElement("path", {
+  d: "M13.4286 5.71429H10V6.57143C10 7.04482 9.61624 7.42857 9.14286 7.42857H7.42857C6.95518 7.42857 6.57143 7.04482 6.57143 6.57143V5.71429H5.71429C4.76751 5.71429 4 6.4818 4 7.42857V17.7143C4 18.6611 4.76751 19.4286 5.71429 19.4286H10.8571V17.7143H5.71429V9.14286H17.7143V10.8571H19.4286V7.42857C19.4286 6.4818 18.6611 5.71429 17.7143 5.71429H16.8571V6.57143C16.8571 7.04482 16.4734 7.42857 16 7.42857H14.2857C13.8123 7.42857 13.4286 7.04482 13.4286 6.57143V5.71429Z",
+  fill: "#161C4F"
+}), _react.default.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M20.9217 17.2857C20.9217 17.446 20.9071 17.5969 20.8878 17.7477L21.9104 18.5256C22.0025 18.5963 22.0267 18.7236 21.9685 18.8273L20.9992 20.4584C20.9411 20.5621 20.8151 20.6046 20.7036 20.5621L19.4968 20.0907C19.2448 20.2746 18.9734 20.4349 18.6777 20.5527L18.4936 21.802C18.479 21.9151 18.3773 22 18.2561 22H16.3175C16.1963 22 16.0945 21.9151 16.08 21.802L15.8958 20.5527C15.6002 20.4349 15.3288 20.2793 15.0768 20.0907L13.87 20.5621C13.7634 20.5999 13.6325 20.5621 13.5743 20.4584L12.605 18.8273C12.5469 18.7236 12.5711 18.5963 12.6632 18.5256L13.6858 17.7477C13.6664 17.5969 13.6519 17.4413 13.6519 17.2857C13.6519 17.1301 13.6664 16.9746 13.6858 16.8237L12.6632 16.0459C12.5711 15.9751 12.542 15.8479 12.605 15.7441L13.5743 14.113C13.6325 14.0093 13.7585 13.9669 13.87 14.0093L15.0768 14.4807C15.3288 14.2969 15.6002 14.1366 15.8958 14.0187L16.08 12.7694C16.0945 12.6563 16.1963 12.5714 16.3175 12.5714H18.2561C18.3773 12.5714 18.479 12.6563 18.4936 12.7694L18.6777 14.0187C18.9734 14.1366 19.2448 14.2921 19.4968 14.4807L20.7036 14.0093C20.8102 13.9716 20.9411 14.0093 20.9992 14.113L21.9685 15.7441C22.0267 15.8479 22.0025 15.9751 21.9104 16.0459L20.8878 16.8237C20.9071 16.9746 20.9217 17.1254 20.9217 17.2857ZM15.5906 17.2857C15.5906 18.1956 16.3515 18.9357 17.2869 18.9357C18.2223 18.9357 18.9832 18.1956 18.9832 17.2857C18.9832 16.3759 18.2223 15.6357 17.2869 15.6357C16.3515 15.6357 15.5906 16.3759 15.5906 17.2857Z",
+  fill: "#161C4F"
+}), _react.default.createElement("path", {
+  d: "M7.42857 4.42857C7.42857 4.19188 7.62045 4 7.85714 4H8.71429C8.95098 4 9.14286 4.19188 9.14286 4.42857V6.14286C9.14286 6.37955 8.95098 6.57143 8.71429 6.57143H7.85714C7.62045 6.57143 7.42857 6.37955 7.42857 6.14286V4.42857Z",
+  fill: "#161C4F"
+}), _react.default.createElement("path", {
+  d: "M14.2857 4.42857C14.2857 4.19188 14.4776 4 14.7143 4H15.5714C15.8081 4 16 4.19188 16 4.42857V6.14286C16 6.37955 15.8081 6.57143 15.5714 6.57143H14.7143C14.4776 6.57143 14.2857 6.37955 14.2857 6.14286V4.42857Z",
+  fill: "#161C4F"
+}));
+
+exports.EventDesign = EventDesign;
\ No newline at end of file
diff --git a/dist/icon/custom/Events.d.ts b/dist/icon/custom/Events.d.ts
new file mode 100644
index 000000000..008098d4d
--- /dev/null
+++ b/dist/icon/custom/Events.d.ts
@@ -0,0 +1,3 @@
+import { ComponentType } from 'react';
+import { CustomIconProps } from '@monorail/icon/Icon';
+export declare const Events: ComponentType<CustomIconProps>;
diff --git a/dist/icon/custom/Events.js b/dist/icon/custom/Events.js
new file mode 100644
index 000000000..eca939df3
--- /dev/null
+++ b/dist/icon/custom/Events.js
@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Events = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Events = props => _react.default.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _react.default.createElement("path", {
+  d: "M13.4286 5.71429H10V6.57143C10 7.04482 9.61624 7.42857 9.14286 7.42857H7.42857C6.95518 7.42857 6.57143 7.04482 6.57143 6.57143V5.71429H5.71429C4.76751 5.71429 4 6.4818 4 7.42857V17.7143C4 18.6611 4.76751 19.4286 5.71429 19.4286H13V17.7143H5.71429V9.14286H17.7143V10.8571H19.4286V7.42857C19.4286 6.4818 18.6611 5.71429 17.7143 5.71429H16.8571V6.57143C16.8571 7.04482 16.4734 7.42857 16 7.42857H14.2857C13.8123 7.42857 13.4286 7.04482 13.4286 6.57143V5.71429Z",
+  fill: "#161C4F"
+}), _react.default.createElement("path", {
+  d: "M7.42857 4.42857C7.42857 4.19188 7.62045 4 7.85714 4H8.71429C8.95098 4 9.14286 4.19188 9.14286 4.42857V6.14286C9.14286 6.37955 8.95098 6.57143 8.71429 6.57143H7.85714C7.62045 6.57143 7.42857 6.37955 7.42857 6.14286V4.42857Z",
+  fill: "#161C4F"
+}), _react.default.createElement("path", {
+  d: "M14.2857 4.42857C14.2857 4.19188 14.4776 4 14.7143 4H15.5714C15.8081 4 16 4.19188 16 4.42857V6.14286C16 6.37955 15.8081 6.57143 15.5714 6.57143H14.7143C14.4776 6.57143 14.2857 6.37955 14.2857 6.14286V4.42857Z",
+  fill: "#161C4F"
+}), _react.default.createElement("path", {
+  d: "M14.7143 17.2857L17.1429 12.5714H22L18.9643 15.5179H21.9533L14.7143 22L17.1429 17.2857H14.7143Z",
+  fill: "#161C4F"
+}));
+
+exports.Events = Events;
\ No newline at end of file
diff --git a/dist/icon/custom/Home.d.ts b/dist/icon/custom/Home.d.ts
new file mode 100644
index 000000000..0c7360058
--- /dev/null
+++ b/dist/icon/custom/Home.d.ts
@@ -0,0 +1,3 @@
+import { ComponentType } from 'react';
+import { CustomIconProps } from '@monorail/icon/Icon';
+export declare const Home: ComponentType<CustomIconProps>;
diff --git a/dist/icon/custom/Home.js b/dist/icon/custom/Home.js
new file mode 100644
index 000000000..71c0580a5
--- /dev/null
+++ b/dist/icon/custom/Home.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Home = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Home = props => _react.default.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _react.default.createElement("path", {
+  d: "M10.2 20V14.6667H13.8V20H18.3V12.8889H21L12 4L3 12.8889H5.7V20H10.2Z",
+  fill: "#161C4F"
+}), _react.default.createElement("path", {
+  d: "M14.7 4H16.5V9.33333H14.7V4Z",
+  fill: "#161C4F"
+}));
+
+exports.Home = Home;
\ No newline at end of file
diff --git a/dist/icon/custom/Robot.d.ts b/dist/icon/custom/Robot.d.ts
new file mode 100644
index 000000000..a4b20cea3
--- /dev/null
+++ b/dist/icon/custom/Robot.d.ts
@@ -0,0 +1,3 @@
+import { ComponentType } from 'react';
+import { CustomIconProps } from '@monorail/icon/Icon';
+export declare const Robot: ComponentType<CustomIconProps>;
diff --git a/dist/icon/custom/Robot.js b/dist/icon/custom/Robot.js
new file mode 100644
index 000000000..fe636568a
--- /dev/null
+++ b/dist/icon/custom/Robot.js
@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Robot = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Robot = props => _react.default.createElement("svg", _extends({
+  width: "16",
+  height: "14",
+  viewBox: "0 0 16 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), _react.default.createElement("path", {
+  d: "M7.99984 0.333496C8.35346 0.333496 8.6926 0.473972 8.94265 0.72402C9.19269 0.974069 9.33317 1.31321 9.33317 1.66683C9.33317 2.16016 9.0665 2.5935 8.6665 2.82016V3.66683H9.33317C10.5708 3.66683 11.7578 4.1585 12.633 5.03366C13.5082 5.90883 13.9998 7.09582 13.9998 8.3335H14.6665C14.8433 8.3335 15.0129 8.40373 15.1379 8.52876C15.2629 8.65378 15.3332 8.82335 15.3332 9.00016V11.0002C15.3332 11.177 15.2629 11.3465 15.1379 11.4716C15.0129 11.5966 14.8433 11.6668 14.6665 11.6668H13.9998V12.3335C13.9998 12.6871 13.8594 13.0263 13.6093 13.2763C13.3593 13.5264 13.0201 13.6668 12.6665 13.6668H3.33317C2.97955 13.6668 2.64041 13.5264 2.39036 13.2763C2.14031 13.0263 1.99984 12.6871 1.99984 12.3335V11.6668H1.33317C1.15636 11.6668 0.98679 11.5966 0.861766 11.4716C0.736742 11.3465 0.666504 11.177 0.666504 11.0002V9.00016C0.666504 8.82335 0.736742 8.65378 0.861766 8.52876C0.98679 8.40373 1.15636 8.3335 1.33317 8.3335H1.99984C1.99984 7.09582 2.4915 5.90883 3.36667 5.03366C4.24184 4.1585 5.42883 3.66683 6.6665 3.66683H7.33317V2.82016C6.93317 2.5935 6.6665 2.16016 6.6665 1.66683C6.6665 1.31321 6.80698 0.974069 7.05703 0.72402C7.30708 0.473972 7.64621 0.333496 7.99984 0.333496ZM4.99984 7.66683C4.55781 7.66683 4.13389 7.84242 3.82133 8.15499C3.50877 8.46755 3.33317 8.89147 3.33317 9.3335C3.33317 9.77552 3.50877 10.1994 3.82133 10.512C4.13389 10.8246 4.55781 11.0002 4.99984 11.0002C5.44186 11.0002 5.86579 10.8246 6.17835 10.512C6.49091 10.1994 6.6665 9.77552 6.6665 9.3335C6.6665 8.89147 6.49091 8.46755 6.17835 8.15499C5.86579 7.84242 5.44186 7.66683 4.99984 7.66683ZM10.9998 7.66683C10.5578 7.66683 10.1339 7.84242 9.82133 8.15499C9.50876 8.46755 9.33317 8.89147 9.33317 9.3335C9.33317 9.77552 9.50876 10.1994 9.82133 10.512C10.1339 10.8246 10.5578 11.0002 10.9998 11.0002C11.4419 11.0002 11.8658 10.8246 12.1783 10.512C12.4909 10.1994 12.6665 9.77552 12.6665 9.3335C12.6665 8.89147 12.4909 8.46755 12.1783 8.15499C11.8658 7.84242 11.4419 7.66683 10.9998 7.66683Z"
+}));
+
+exports.Robot = Robot;
\ No newline at end of file
diff --git a/dist/inputs/CheckmarkSelectGroup.js b/dist/inputs/CheckmarkSelectGroup.js
index 2367daaf2..022246784 100644
--- a/dist/inputs/CheckmarkSelectGroup.js
+++ b/dist/inputs/CheckmarkSelectGroup.js
@@ -7,7 +7,7 @@ exports.CheckmarkSelectGroup = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Select = require("./Select");
 
@@ -15,18 +15,20 @@ var _CommonStyles = require("../CommonStyles");
 
 var _Choice = require("./Choice");
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const CheckmarkSelectGroupWrapper =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "CheckmarkSelectGroup__CheckmarkSelectGroupWrapper",
   componentId: "sc-9lupgs-0"
-})(["", ";"], ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";"], cssOverrides));
 
 const Label =
 /*#__PURE__*/
@@ -37,12 +39,12 @@ _styledComponents.default.p.withConfig({
 
 const CheckmarkSelectWrapper =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "CheckmarkSelectGroup__CheckmarkSelectWrapper",
   componentId: "sc-9lupgs-2"
-})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;", ";"], ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;", ";"], cssOverrides));
 
 const CheckmarkSelectLabel =
 /*#__PURE__*/
diff --git a/dist/inputs/Choice.js b/dist/inputs/Choice.js
index eb5dfc849..f248c14d0 100644
--- a/dist/inputs/Choice.js
+++ b/dist/inputs/Choice.js
@@ -20,44 +20,38 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 */
 const BBChoiceInput =
 /*#__PURE__*/
-(0, _styledComponents.default)('input').withConfig({
+_styledComponents.default.input.withConfig({
   displayName: "Choice__BBChoiceInput",
   componentId: "sc-16u3c70-0"
 })(["opacity:0;position:absolute;z-index:-1;"]);
+
 const BBChoiceFakeLabel =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Choice__BBChoiceFakeLabel",
   componentId: "sc-16u3c70-1"
-})(["", ";", ";flex-grow:1;word-break:break-word;transition:all ease 150ms;"], ({
+})(({
   answered
-}) => answered && (0, _styledComponents.css)(["transform:translateX(24px);"]), (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5));
+}) => (0, _styledComponents.css)(["", ";", ";flex-grow:1;word-break:break-word;transition:all ease 150ms;"], answered && (0, _styledComponents.css)(["transform:translateX(24px);"]), (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5)));
+
 const CCChoice =
 /*#__PURE__*/
-(0, _styledComponents.default)('label').withConfig({
+_styledComponents.default.label.withConfig({
   displayName: "Choice__CCChoice",
   componentId: "sc-16u3c70-2"
-})(["", ";", ";", ";", ";", ";align-items:center;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;min-height:24px;padding:4px 4px 4px 32px;position:relative;user-select:none;width:100%;", ";.ChoiceButtonChecked{color:", ";transform:translateX(", "px);}.ChoiceButtonUnchecked{color:", ";transform:translateX(", "px);}.RealInput:checked ~ .ChoiceButtonChecked{", ";}.RealInput:checked ~ .ChoiceButtonUnchecked{", ";}.RealInput:not(:checked) ~ .ChoiceButtonChecked{", ";}.RealInput:not(:checked) ~ .ChoiceButtonUnchecked{", ";}.IncorrectIcon{color:", ";", ";}.CorrectIcon{color:", ";", ";}", "{left:8px;position:absolute;font-size:16px;transition:all ease 150ms;}", ";"], ({
-  disabled
-}) => disabled && _CommonStyles.baseDisabledStyles, ({
+})(({
+  disabled,
   readOnly,
   incorrect,
-  correct
-}) => (readOnly || incorrect || correct) && (0, _styledComponents.css)(["cursor:default;pointer-events:none;"]), (0, _CommonStyles.baseChromelessStyles)(), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.borderRadius)(), _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), ({
+  correct,
+  cssOverrides,
   answered
-}) => answered ? 24 : 0, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), ({
-  answered
-}) => answered ? 24 : 0, (0, _CommonStyles.visible)(true), (0, _CommonStyles.visible)(false), (0, _CommonStyles.visible)(false), (0, _CommonStyles.visible)(true), (0, _CommonStyles.colors)(_CommonStyles.Colors.Red), ({
-  incorrect
-}) => (0, _CommonStyles.visible)(incorrect), (0, _CommonStyles.colors)(_CommonStyles.Colors.Green), ({
-  correct
-}) => (0, _CommonStyles.visible)(correct), _Icon.Icon, ({
-  cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";", ";", ";", ";align-items:center;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;min-height:24px;padding:4px 4px 4px 32px;position:relative;user-select:none;width:100%;", ";.ChoiceButtonChecked{color:", ";transform:translateX(", "px);}.ChoiceButtonUnchecked{color:", ";transform:translateX(", "px);}.RealInput:checked ~ .ChoiceButtonChecked{", ";}.RealInput:checked ~ .ChoiceButtonUnchecked{", ";}.RealInput:not(:checked) ~ .ChoiceButtonChecked{", ";}.RealInput:not(:checked) ~ .ChoiceButtonUnchecked{", ";}.IncorrectIcon{color:", ";", ";}.CorrectIcon{color:", ";", ";}", "{left:8px;position:absolute;font-size:16px;transition:all ease 150ms;}", ";"], disabled && _CommonStyles.baseDisabledStyles, (readOnly || incorrect || correct) && (0, _styledComponents.css)(["cursor:default;pointer-events:none;"]), (0, _CommonStyles.baseChromelessStyles)(), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.borderRadius)(), _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), answered ? 24 : 0, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), answered ? 24 : 0, (0, _CommonStyles.visible)(true), (0, _CommonStyles.visible)(false), (0, _CommonStyles.visible)(false), (0, _CommonStyles.visible)(true), (0, _CommonStyles.colors)(_CommonStyles.Colors.Red), (0, _CommonStyles.visible)(incorrect), (0, _CommonStyles.colors)(_CommonStyles.Colors.Green), (0, _CommonStyles.visible)(correct), _Icon.Icon, cssOverrides));
 /*
 * Types
 */
 
+
 /*
 * Component
 */
diff --git a/dist/inputs/MultipleTextField.d.ts b/dist/inputs/MultipleTextField.d.ts
index 523639341..30ce0758d 100644
--- a/dist/inputs/MultipleTextField.d.ts
+++ b/dist/inputs/MultipleTextField.d.ts
@@ -1,7 +1,7 @@
-import React, { Component, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 import { TextFieldProps } from './TextField';
-export declare const BBTextFieldLabel: import("styled-components").StyledComponentClass<{}, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const BBTextFieldLabel: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare type MultipleTextFieldProps = TextFieldProps & {
     key: string;
 };
diff --git a/dist/inputs/MultipleTextField.js b/dist/inputs/MultipleTextField.js
index 29f52b8fa..2541105fe 100644
--- a/dist/inputs/MultipleTextField.js
+++ b/dist/inputs/MultipleTextField.js
@@ -7,16 +7,14 @@ exports.MultipleTextField = exports.BBTextFieldLabel = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 var _TextField = require("./TextField");
 
 var _CommonStyles = require("../CommonStyles");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -24,19 +22,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 // TODO - duplicate from text field container
 const MultipleTextFieldContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('label').withConfig({
+_styledComponents.default.label.withConfig({
   displayName: "MultipleTextField__MultipleTextFieldContainer",
   componentId: "vlh0z2-0"
-})(["", ";float:none;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides); // TODO - consolidate label into a common component
+}) => (0, _styledComponents.css)(["", ";float:none;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides)); // TODO - consolidate label into a common component
+
 
 const BBTextFieldLabel =
 /*#__PURE__*/
-(0, _styledComponents.default)('p').withConfig({
+_styledComponents.default.p.withConfig({
   displayName: "MultipleTextField__BBTextFieldLabel",
   componentId: "vlh0z2-1"
 })(["", ";margin:4px 0;"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5));
+
 exports.BBTextFieldLabel = BBTextFieldLabel;
 
 const TextFieldsWrapper =
@@ -57,7 +57,7 @@ class MultipleTextField extends _react.Component {
     } = this.props;
     return _react.default.createElement(MultipleTextFieldContainer, {
       cssOverrides: cssOverrides
-    }, !(0, _primitiveGuards.isNil)(label) && _react.default.createElement(BBTextFieldLabel, null, label), _react.default.createElement(TextFieldsWrapper, null, textFields.map((t, k) => _react.default.createElement(_TextField.TextField, _extends({
+    }, !(0, _typeGuards.isNil)(label) && _react.default.createElement(BBTextFieldLabel, null, label), _react.default.createElement(TextFieldsWrapper, null, textFields.map((t, k) => _react.default.createElement(_TextField.TextField, _extends({
       key: k
     }, t, {
       onChange: e => onChange(t.key, t.type === 'number' ? Number(e.target.value) : e.target.value),
diff --git a/dist/inputs/Search.d.ts b/dist/inputs/Search.d.ts
index b4516205e..df5ed8f85 100644
--- a/dist/inputs/Search.d.ts
+++ b/dist/inputs/Search.d.ts
@@ -1,13 +1,11 @@
-import React, { ChangeEvent, Component, MouseEvent, RefObject } from 'react';
+import { ChangeEvent, Component, MouseEvent, RefObject } from 'react';
 import { SimpleInterpolation } from 'styled-components';
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
 import { Overwrite } from 'typelevel-ts';
-export declare const BBSearchContainer: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLLabelElement> & React.LabelHTMLAttributes<HTMLLabelElement> & BBSearchContainerProps, any, React.ClassAttributes<HTMLLabelElement> & React.LabelHTMLAttributes<HTMLLabelElement> & BBSearchContainerProps>;
-export declare const BBSearchInput: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & BBSearchInputProps, any, React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement> & BBSearchInputProps>;
-export declare type BBSearchInput = StyledHtmlElement<HTMLInputElement, BBSearchInputProps>;
+export declare const BBSearchContainer: import("styled-components").StyledComponent<"label", any, BBSearchContainerProps, never>;
+export declare const BBSearchInput: import("styled-components").StyledComponent<"input", any, BBSearchInputProps, never>;
 export declare type BBSearchContainerProps = {
     cssOverrides?: SimpleInterpolation;
-    searchRef?: RefObject<SearchRefType>;
+    searchRef?: RefObject<HTMLInputElement>;
     darkMode: boolean;
 };
 export declare type BBSearchInputProps = {
@@ -16,7 +14,6 @@ export declare type BBSearchInputProps = {
     placeholder: string;
     value?: string;
 };
-export declare type SearchRefType = StyledHtmlElement<HTMLInputElement, BBSearchInputProps>;
 declare type SearchProps = BBSearchContainerProps & Overwrite<BBSearchInputProps, {
     onChange: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
 }>;
diff --git a/dist/inputs/Search.js b/dist/inputs/Search.js
index 425a643d2..388d079fd 100644
--- a/dist/inputs/Search.js
+++ b/dist/inputs/Search.js
@@ -19,6 +19,8 @@ var _buttonTypes = require("../buttons/buttonTypes");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 //
 // Styles
 //
@@ -29,11 +31,10 @@ const BBSearchContainer =
 _styledComponents.default.label.withConfig({
   displayName: "Search__BBSearchContainer",
   componentId: "zpwvd9-0"
-})(["", ";", ";border-radius:100px;box-sizing:border-box;overflow:hidden;position:relative;height:24px;flex-shrink:0;", ";"], ({
-  darkMode
-}) => darkMode ? (0, _styledComponents.css)(["background:", ";border:1px solid ", ";&:hover{background:", ";}&:focus{background:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.22), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.24)) : (0, _styledComponents.css)(["border:1px solid ", ";&:hover{border-color:", ";}&:focus{border-color:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.08), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.5), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)), (0, _CommonStyles.flexFlow)('row'), ({
+})(({
+  darkMode,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";border-radius:100px;box-sizing:border-box;overflow:hidden;position:relative;height:24px;flex-shrink:0;", ";"], darkMode ? (0, _styledComponents.css)(["background:", ";border:1px solid ", ";&:hover{background:", ";}&:focus{background:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.22), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.24)) : (0, _styledComponents.css)(["border:1px solid ", ";&:hover{border-color:", ";}&:focus{border-color:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.08), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.5), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)), (0, _CommonStyles.flexFlow)('row'), cssOverrides));
 
 exports.BBSearchContainer = BBSearchContainer;
 const BBSearchIcon =
@@ -41,21 +42,21 @@ const BBSearchIcon =
 (0, _styledComponents.default)(({
   darkMode,
   ...otherProps
-}) => _react.default.createElement(_Icon.Icon, otherProps)).withConfig({
-  displayName: "Search__BBSearchIcon",
-  componentId: "zpwvd9-1"
-})(["color:", ";left:8px;pointer-events:none;position:absolute;top:", "px;"], ({
+}) => _react.default.createElement(_Icon.Icon, otherProps))(({
   darkMode
-}) => darkMode && (0, _CommonStyles.colors)(_CommonStyles.Colors.White), BBSearchIconPos);
+}) => (0, _styledComponents.css)(["color:", ";left:8px;pointer-events:none;position:absolute;top:", "px;"], darkMode && (0, _CommonStyles.colors)(_CommonStyles.Colors.White), BBSearchIconPos));
 
 const BBSearchInput =
 /*#__PURE__*/
 _styledComponents.default.input.withConfig({
   displayName: "Search__BBSearchInput",
-  componentId: "zpwvd9-2"
-})(["", ";", ";border:0;flex:1 1 100%;height:100%;outline:none;padding:0 22px 0 28px;border-radius:100px;box-sizing:border-box;", ";"], ({
+  componentId: "zpwvd9-1"
+})(({
   darkMode
-}) => darkMode ? (0, _styledComponents.css)(["background:", ";border:0;color:", ";::placeholder{color:", ";}&:hover{background:", ";}&:focus{background:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.22), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.24)) : (0, _styledComponents.css)(["border:1px solid ", ";::placeholder{color:", ";font-style:italic;font-weight:300;}&:hover{border-color:", ";}&:focus{border-color:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.08), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.5), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)), (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5), _CommonStyles.buttonTransition);
+}) => (0, _styledComponents.css)(["", ";", ";border:0;flex:1 1 100%;height:100%;outline:none;padding:0 22px 0 28px;border-radius:100px;box-sizing:border-box;", ";"], darkMode ? (0, _styledComponents.css)(["background:", ";border:0;color:", ";::placeholder{color:", ";}&:hover{background:", ";}&:focus{background:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.2), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.22), (0, _CommonStyles.colors)(_CommonStyles.Colors.White, 0.24)) : (0, _styledComponents.css)(["border:1px solid ", ";::placeholder{color:", ";font-style:italic;font-weight:300;}&:hover{border-color:", ";}&:focus{border-color:", ";}"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.08), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.5), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)), (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5), _CommonStyles.buttonTransition)); //
+// Types
+//
+
 
 exports.BBSearchInput = BBSearchInput;
 
@@ -71,12 +72,13 @@ class Search extends _react.Component {
       placeholder = 'Search',
       value,
       onClick,
-      searchRef
+      searchRef,
+      ...otherProps
     } = this.props;
-    return _react.default.createElement(BBSearchContainer, {
+    return _react.default.createElement(BBSearchContainer, _extends({
       cssOverrides: cssOverrides,
       darkMode: darkMode
-    }, _react.default.createElement(BBSearchIcon, {
+    }, otherProps), _react.default.createElement(BBSearchIcon, {
       icon: "search_icon",
       darkMode: darkMode
     }), _react.default.createElement(BBSearchInput, {
diff --git a/dist/inputs/Select.js b/dist/inputs/Select.js
index 33e1afd73..ffc7561f8 100644
--- a/dist/inputs/Select.js
+++ b/dist/inputs/Select.js
@@ -7,20 +7,22 @@ exports.Select = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _CommonStyles = require("../CommonStyles");
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const SelectGroupWrapper =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Select__SelectGroupWrapper",
   componentId: "sc-1lva6s2-0"
-})(["margin:0;padding:0;border:0;", ";"], ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["margin:0;padding:0;border:0;", ";"], cssOverrides));
 
 const SelectElementWrapper =
 /*#__PURE__*/
diff --git a/dist/inputs/TextArea.d.ts b/dist/inputs/TextArea.d.ts
index 6c9e7f224..ad8b11d77 100644
--- a/dist/inputs/TextArea.d.ts
+++ b/dist/inputs/TextArea.d.ts
@@ -1,4 +1,3 @@
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
 import React, { ChangeEvent, Component } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 declare type BBTextAreaContainerProps = {
@@ -17,7 +16,7 @@ declare type BBTextAreaInputProps = {
 };
 export declare type TextAreaProps = BBTextAreaContainerProps & BBTextAreaInputProps & {};
 export declare class TextArea extends Component<TextAreaProps> {
-    textArea: React.RefObject<StyledHtmlElement<HTMLTextAreaElement, BBTextAreaInputProps, unknown>>;
+    textArea: React.RefObject<HTMLTextAreaElement>;
     setCompactHeight: () => void;
     componentDidUpdate(): void;
     componentDidMount(): void;
diff --git a/dist/inputs/TextArea.js b/dist/inputs/TextArea.js
index 8375fa71d..f6a2d5f35 100644
--- a/dist/inputs/TextArea.js
+++ b/dist/inputs/TextArea.js
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TextArea = void 0;
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -22,32 +22,34 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 */
 const BBTextAreaContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('label').withConfig({
+_styledComponents.default.label.withConfig({
   displayName: "TextArea__BBTextAreaContainer",
   componentId: "zv28js-0"
-})(["", ";max-width:256px;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";max-width:256px;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
+
 const BBTextAreaLabel =
 /*#__PURE__*/
-(0, _styledComponents.default)('p').withConfig({
+_styledComponents.default.p.withConfig({
   displayName: "TextArea__BBTextAreaLabel",
   componentId: "zv28js-1"
 })(["", ";margin:4px 0;"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5));
+
 const BBTextAreaInput =
 /*#__PURE__*/
-(0, _styledComponents.default)('textarea').withConfig({
+_styledComponents.default.textarea.withConfig({
   displayName: "TextArea__BBTextAreaInput",
   componentId: "zv28js-2"
-})(["", ";", ";border:1px solid ", ";box-sizing:border-box;color:", ";outline:none;padding:4px 6px 4px 6px;resize:none;width:100%;", ";::placeholder{color:", ";font-style:italic;}&:hover{border:1px solid ", ";}&:focus,&:active{border:1px solid ", ";}", ";", ";"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.12), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.3), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), ({
-  chromeless
-}) => chromeless && (0, _styledComponents.css)(["border:1px solid transparent;"]), ({
+})(({
+  chromeless,
   compact
-}) => compact && (0, _styledComponents.css)(["overflow:hidden;"]));
+}) => (0, _styledComponents.css)(["", ";", ";border:1px solid ", ";box-sizing:border-box;color:", ";outline:none;padding:4px 6px 4px 6px;resize:none;width:100%;", ";::placeholder{color:", ";font-style:italic;}&:hover{border:1px solid ", ";}&:focus,&:active{border:1px solid ", ";}", ";", ";"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.12), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.3), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), chromeless && (0, _styledComponents.css)(["border:1px solid transparent;"]), compact && (0, _styledComponents.css)(["overflow:hidden;"])));
 /*
 * Types
 */
 
+
 /*
 * Component
 */
@@ -64,7 +66,7 @@ class TextArea extends _react.Component {
       if (compact) {
         const current = this.textArea.current;
 
-        if (!(0, _primitiveGuards.isNil)(current)) {
+        if (!(0, _typeGuards.isNil)(current)) {
           window.requestAnimationFrame(() => {
             current.style.height = 'auto';
             current.style.height = current.scrollHeight + 'px';
@@ -106,7 +108,7 @@ class TextArea extends _react.Component {
     } = this.props;
     return _react.default.createElement(BBTextAreaContainer, {
       cssOverrides: cssOverrides
-    }, !(0, _primitiveGuards.isNil)(label) && _react.default.createElement(BBTextAreaLabel, null, label), _react.default.createElement(BBTextAreaInput, _extends({
+    }, !(0, _typeGuards.isNil)(label) && _react.default.createElement(BBTextAreaLabel, null, label), _react.default.createElement(BBTextAreaInput, _extends({
       chromeless: chromeless,
       className: "new-textarea",
       compact: compact,
diff --git a/dist/inputs/TextField.d.ts b/dist/inputs/TextField.d.ts
index 4c68934a1..5fdefa815 100644
--- a/dist/inputs/TextField.d.ts
+++ b/dist/inputs/TextField.d.ts
@@ -1,6 +1,6 @@
-import React, { ChangeEvent, Component } from 'react';
+import { ChangeEvent, Component } from 'react';
 import { SimpleInterpolation } from 'styled-components';
-export declare const BBTextFieldLabel: import("styled-components").StyledComponentClass<{}, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>;
+export declare const BBTextFieldLabel: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare type BBTextFieldContainerProps = {
     cssOverrides?: SimpleInterpolation;
 };
@@ -16,6 +16,8 @@ declare type BBTextFieldInputProps = {
     readOnly?: boolean;
     required?: boolean;
     type?: string;
+    min?: number;
+    max?: number;
 };
 export declare type TextFieldProps = BBTextFieldContainerProps & BBTextFieldInputProps & {};
 export declare class TextField extends Component<TextFieldProps> {
diff --git a/dist/inputs/TextField.js b/dist/inputs/TextField.js
index 3a9e8c67c..8417d1584 100644
--- a/dist/inputs/TextField.js
+++ b/dist/inputs/TextField.js
@@ -22,18 +22,20 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 */
 const BBTextFieldContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('label').withConfig({
+_styledComponents.default.label.withConfig({
   displayName: "TextField__BBTextFieldContainer",
   componentId: "sc-1nq70vt-0"
-})(["", ";float:none;max-width:256px;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";float:none;max-width:256px;width:100%;position:relative;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
+
 const BBTextFieldLabel =
 /*#__PURE__*/
-(0, _styledComponents.default)('p').withConfig({
+_styledComponents.default.p.withConfig({
   displayName: "TextField__BBTextFieldLabel",
   componentId: "sc-1nq70vt-1"
 })(["", ";margin:4px 0;"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5));
+
 exports.BBTextFieldLabel = BBTextFieldLabel;
 const baseIconStyles =
 /*#__PURE__*/
@@ -50,33 +52,33 @@ const StyledRightIcon =
   displayName: "TextField__StyledRightIcon",
   componentId: "sc-1nq70vt-3"
 })(["", ";right:8px;"], baseIconStyles);
+
 const BBTextFieldInput =
 /*#__PURE__*/
-(0, _styledComponents.default)('input').withConfig({
+_styledComponents.default.input.withConfig({
   displayName: "TextField__BBTextFieldInput",
   componentId: "sc-1nq70vt-4"
-})(["", ";", ";border:", ";box-sizing:border-box;color:", ";height:24px;outline:none;padding:4px ", "px 4px ", "px;width:100%;", ";&[type='number']{&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{opacity:1;}}::placeholder{color:", ";font-style:italic;}&:hover{border-color:", ";}&:focus,&:active{border-color:", ";}"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), ({
-  chromeless
-}) => chromeless ? `1px solid transparent` : `1px solid ${(0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.12)}`, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), ({
+})(({
+  chromeless,
+  iconLeft,
   iconRight
-}) => iconRight ? 30 : 6, ({
-  iconLeft
-}) => iconLeft ? 30 : 6, _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.3), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)); // TODO: Much duplication from TextInput
+}) => (0, _styledComponents.css)(["", ";", ";border:", ";box-sizing:border-box;color:", ";height:24px;outline:none;padding:4px ", "px 4px ", "px;width:100%;", ";&[type='number']{&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{opacity:1;}}::placeholder{color:", ";font-style:italic;}&:hover{border-color:", ";}&:focus,&:active{border-color:", ";}"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), chromeless ? `1px solid transparent` : `1px solid ${(0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.12)}`, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), iconRight ? 30 : 6, iconLeft ? 30 : 6, _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.3), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue))); // TODO: Much duplication from TextInput
+
 
 const BBTextAreaInput =
 /*#__PURE__*/
-(0, _styledComponents.default)('textarea').withConfig({
+_styledComponents.default.textarea.withConfig({
   displayName: "TextField__BBTextAreaInput",
   componentId: "sc-1nq70vt-5"
-})(["", ";", ";border:1px solid ", ";box-sizing:border-box;color:", ";height:5em;outline:none;padding:4px ", "px 4px ", "px;width:100%;", ";::placeholder{color:", ";font-style:italic;}&:hover{border-color:", ";}&:focus,&:active{border-color:", ";}"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.12), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), ({
+})(({
+  iconLeft,
   iconRight
-}) => iconRight ? 30 : 6, ({
-  iconLeft
-}) => iconLeft ? 30 : 6, _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.3), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue));
+}) => (0, _styledComponents.css)(["", ";", ";border:1px solid ", ";box-sizing:border-box;color:", ";height:5em;outline:none;padding:4px ", "px 4px ", "px;width:100%;", ";::placeholder{color:", ";font-style:italic;}&:hover{border-color:", ";}&:focus,&:active{border-color:", ";}"], (0, _CommonStyles.typography)(400, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.borderRadius)(), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.12), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), iconRight ? 30 : 6, iconLeft ? 30 : 6, _CommonStyles.buttonTransition, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black54), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.3), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)));
 /*
 * Types
 */
 
+
 /*
 * Component
 */
@@ -95,6 +97,8 @@ class TextField extends _react.Component {
       readOnly,
       required,
       type,
+      min,
+      max,
       ...otherProps
     } = this.props;
     return _react.default.createElement(BBTextFieldContainer, {
@@ -116,7 +120,9 @@ class TextField extends _react.Component {
       value: value,
       disabled: disabled,
       readOnly: readOnly,
-      required: required
+      required: required,
+      min: min,
+      max: max
     }, otherProps)));
   }
 
diff --git a/dist/layout/ScrollAnimation.d.ts b/dist/layout/ScrollAnimation.d.ts
index 39121e622..4a76149f4 100644
--- a/dist/layout/ScrollAnimation.d.ts
+++ b/dist/layout/ScrollAnimation.d.ts
@@ -1,9 +1,7 @@
 import React, { Component, RefObject } from 'react';
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
-import { PageHeaderShadowProps } from '../pageHeader/PageHeader';
 declare type Props = {
-    scrollContainer: RefObject<StyledHtmlElement<HTMLDivElement, {}>>;
-    animatingElement: RefObject<StyledHtmlElement<HTMLDivElement, PageHeaderShadowProps>>;
+    scrollContainer: RefObject<HTMLDivElement>;
+    animatingElement: RefObject<HTMLDivElement>;
     animationFunction: (props: {
         scrollAmount: number;
         animationTermination: number;
@@ -18,7 +16,7 @@ export declare class ScrollAnimation extends Component<Props, State> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    handleScroll: (event: UIEvent) => void;
+    handleScroll: EventListener;
     render(): React.ReactNode;
 }
 export {};
diff --git a/dist/layout/ScrollAnimation.js b/dist/layout/ScrollAnimation.js
index 2b1f2360e..5eddb08fa 100644
--- a/dist/layout/ScrollAnimation.js
+++ b/dist/layout/ScrollAnimation.js
@@ -7,7 +7,7 @@ exports.ScrollAnimation = void 0;
 
 var _react = require("react");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 class ScrollAnimation extends _react.Component {
   constructor(...args) {
@@ -25,7 +25,7 @@ class ScrollAnimation extends _react.Component {
         animationFunction
       } = this.props;
 
-      if (!(0, _primitiveGuards.isNil)(event.currentTarget) && !(0, _primitiveGuards.isNil)(animatingElement)) {
+      if (!(0, _typeGuards.isNil)(event.currentTarget) && !(0, _typeGuards.isNil)(animatingElement)) {
         const scrollElement = event.currentTarget;
         /* Josh don't hate me! */
 
@@ -50,7 +50,7 @@ class ScrollAnimation extends _react.Component {
       hasEventHandler
     } = this.state;
 
-    if (!hasEventHandler && !(0, _primitiveGuards.isNil)(scrollContainer.current)) {
+    if (!hasEventHandler && !(0, _typeGuards.isNil)(scrollContainer.current)) {
       this.setState(() => ({
         hasEventHandler: true
       }));
@@ -68,7 +68,7 @@ class ScrollAnimation extends _react.Component {
       hasEventHandler
     } = this.state;
 
-    if (!hasEventHandler && !(0, _primitiveGuards.isNil)(scrollContainer)) {
+    if (!hasEventHandler && !(0, _typeGuards.isNil)(scrollContainer)) {
       this.setState(() => ({
         hasEventHandler: true
       }));
@@ -83,7 +83,7 @@ class ScrollAnimation extends _react.Component {
       }
     } = this.props;
 
-    if (!(0, _primitiveGuards.isNil)(scrollContainer)) {
+    if (!(0, _typeGuards.isNil)(scrollContainer)) {
       scrollContainer.removeEventListener('scroll', this.handleScroll);
     }
   }
diff --git a/dist/layout/SingleCollection.d.ts b/dist/layout/SingleCollection.d.ts
index 9cbf7aa36..82138abe0 100644
--- a/dist/layout/SingleCollection.d.ts
+++ b/dist/layout/SingleCollection.d.ts
@@ -1,17 +1,15 @@
 import React, { Component, ReactNode, RefObject } from 'react';
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
-import { PageHeaderShadowRefType } from '@monorail/pageHeader/PageHeader';
-export declare type SingleCollectionContainerRef = StyledHtmlElement<HTMLDivElement, {}>;
+export declare type SingleCollectionHeaderProps = {
+    shadowRef: RefObject<HTMLDivElement>;
+    willAnimateShadow: boolean;
+};
 declare type Props = {
-    header: (props: {
-        shadowRef: RefObject<PageHeaderShadowRefType>;
-        willAnimateShadow: boolean;
-    }) => ReactNode;
+    header: (props: SingleCollectionHeaderProps) => ReactNode;
     content: ReactNode;
 };
 export declare class SingleCollection extends Component<Props> {
-    singleCollectionContainer: React.RefObject<StyledHtmlElement<HTMLDivElement, {}, unknown>>;
-    pageHeaderShadow: React.RefObject<StyledHtmlElement<HTMLDivElement, import("../pageHeader/PageHeader").PageHeaderShadowProps, unknown>>;
+    singleCollectionContainer: React.RefObject<HTMLDivElement>;
+    pageHeaderShadow: React.RefObject<HTMLDivElement>;
     render(): JSX.Element;
 }
 export {};
diff --git a/dist/layout/layout.d.ts b/dist/layout/layout.d.ts
index 7279c8419..43364e84e 100644
--- a/dist/layout/layout.d.ts
+++ b/dist/layout/layout.d.ts
@@ -1,6 +1,3 @@
-/// <reference path="../../src/typings/cssprop.d.ts" />
-/// <reference types="react" />
 import { CommonComponentType } from '@monorail/types';
-export declare const AppBody: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const AppContainer: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
-export declare const PageContent: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+export declare const AppContainer: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
+export declare const PageContent: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
diff --git a/dist/layout/layout.js b/dist/layout/layout.js
index 6f9ef3eca..b55eae47b 100644
--- a/dist/layout/layout.js
+++ b/dist/layout/layout.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PageContent = exports.AppContainer = exports.AppBody = void 0;
+exports.PageContent = exports.AppContainer = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -11,24 +11,20 @@ var _CommonStyles = require("../CommonStyles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const AppBody =
-/*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
-  displayName: "layout__AppBody",
-  componentId: "sc-1ygcav0-0"
-})(["", ";flex:1;overflow:hidden;"], (0, _CommonStyles.flexFlow)('row'));
-exports.AppBody = AppBody;
 const AppContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "layout__AppContainer",
-  componentId: "sc-1ygcav0-1"
-})(["", ";flex:1;overflow:hidden;"], (0, _CommonStyles.flexFlow)());
+  componentId: "sc-1ygcav0-0"
+})(["", ";flex:1;overflow:hidden;&.event-design,&.events:not(.execution),&.home{", ";}"], (0, _CommonStyles.flexFlow)(), _CommonStyles.gothamFontFamily);
+
 exports.AppContainer = AppContainer;
+
 const PageContent =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "layout__PageContent",
-  componentId: "sc-1ygcav0-2"
+  componentId: "sc-1ygcav0-1"
 })(["", ";flex:1;overflow:hidden;"], (0, _CommonStyles.flexFlow)());
+
 exports.PageContent = PageContent;
\ No newline at end of file
diff --git a/dist/list/List.d.ts b/dist/list/List.d.ts
index 0b51aba13..804d76b93 100644
--- a/dist/list/List.d.ts
+++ b/dist/list/List.d.ts
@@ -1,4 +1,4 @@
-import React, { CSSProperties, MouseEvent, ReactNode, StatelessComponent } from 'react';
+import { CSSProperties, MouseEvent, ReactNode, StatelessComponent } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 import { Sizes } from '@monorail/CommonStyles';
 import { IconProps } from '@monorail/icon/Icon';
@@ -24,19 +24,13 @@ declare type ListItemProps = LinkProps & ListSizeProps & CommonComponentType & {
     size?: Sizes;
     disabled?: boolean;
 };
-export declare const ListItemText: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
-export declare const ListItemPrimaryText: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>>;
-export declare const ListItemSecondaryText: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement>>;
-export declare const ListItemGraphic: import("styled-components").StyledComponentClass<ListSizeProps & {
+export declare const ListItemText: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
+export declare const ListItemPrimaryText: import("styled-components").StyledComponent<"span", any, CommonComponentType, never>;
+export declare const ListItemSecondaryText: import("styled-components").StyledComponent<"span", any, CommonComponentType, never>;
+export declare const ListItemGraphic: import("styled-components").StyledComponent<({ dense, ...otherProps }: any) => JSX.Element, any, ListSizeProps & {
     icon: string;
-} & IconProps, any, Pick<ListSizeProps & {
-    icon: string;
-} & IconProps, "cssOverrides" | "icon" | "className" | "onClick" | "size" | "dense"> & {
-    theme?: any;
-}>;
-export declare const ListItem: import("styled-components").StyledComponentClass<ListItemProps, any, Pick<ListItemProps, "id" | "cssOverrides" | "className" | "onClick" | "size" | "as" | "tabIndex" | "to" | "disabled" | "dense" | "activeClassName" | "activeStyle" | "onlyActiveOnIndex"> & {
-    theme?: any;
-}>;
+} & IconProps, never>;
+export declare const ListItem: import("styled-components").StyledComponent<({ cssOverrides, children, activeClassName, ...otherProps }: any) => JSX.Element, any, ListItemProps, never>;
 export declare type SimpleListItemProps = CommonComponentType & LinkProps & {
     dense?: boolean;
     disabled?: boolean;
diff --git a/dist/list/List.js b/dist/list/List.js
index 3bc4038da..be1748c33 100644
--- a/dist/list/List.js
+++ b/dist/list/List.js
@@ -13,7 +13,7 @@ var _CommonStyles = require("../CommonStyles");
 
 var _Icon = require("../icon/Icon");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
@@ -30,16 +30,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 */
 const BBListContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "List__BBListContainer",
   componentId: "sc-10dx7oa-0"
-})(["", ";overflow-y:auto;padding:8px 0;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";overflow-y:auto;padding:8px 0;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
 /*
 * Types
 */
 
+
 /*
 * Component
 */
@@ -70,44 +71,45 @@ exports.ListContainer = ListContainer;
 */
 const ListItemText =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "List__ListItemText",
   componentId: "sc-10dx7oa-1"
-})(["", ";overflow:hidden;width:100%;", ";"], (0, _CommonStyles.flexFlow)('row', 'wrap'), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";overflow:hidden;width:100%;", ";"], (0, _CommonStyles.flexFlow)('row', 'wrap'), cssOverrides));
+
 exports.ListItemText = ListItemText;
+
 const ListItemPrimaryText =
 /*#__PURE__*/
-(0, _styledComponents.default)('span').withConfig({
+_styledComponents.default.span.withConfig({
   displayName: "List__ListItemPrimaryText",
   componentId: "sc-10dx7oa-2"
-})(["", ";"], ({
+})(({
   cssOverrides
 }) => (0, _styledComponents.css)(["", ";", ";color:currentColor;flex:1 1 100%;", ";"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5, 'auto 6px'), _CommonStyles.ellipsis, cssOverrides));
+
 exports.ListItemPrimaryText = ListItemPrimaryText;
+
 const ListItemSecondaryText =
 /*#__PURE__*/
-(0, _styledComponents.default)('span').withConfig({
+_styledComponents.default.span.withConfig({
   displayName: "List__ListItemSecondaryText",
   componentId: "sc-10dx7oa-3"
-})(["", ";", ";color:", ";flex:1 1 100%;", ";"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Content, 'auto 6px'), _CommonStyles.ellipsis, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black62), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";color:", ";flex:1 1 100%;", ";"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Content, 'auto 6px'), _CommonStyles.ellipsis, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black62), cssOverrides));
+
 exports.ListItemSecondaryText = ListItemSecondaryText;
 const ListItemGraphic =
 /*#__PURE__*/
 (0, _styledComponents.default)(({
   dense,
   ...otherProps
-}) => _react.default.createElement(_Icon.Icon, otherProps)).withConfig({
-  displayName: "List__ListItemGraphic",
-  componentId: "sc-10dx7oa-4"
-})(["", ";", ";", ";"], ({
-  dense
-}) => (0, _styledComponents.css)(["margin:auto ", "px;"], dense ? 4 : 6), _CommonStyles.buttonTransition, ({
+}) => _react.default.createElement(_Icon.Icon, otherProps))(({
+  dense,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["margin:auto ", "px;", ";", ";"], dense ? 4 : 6, _CommonStyles.buttonTransition, cssOverrides));
 exports.ListItemGraphic = ListItemGraphic;
 const ListItem =
 /*#__PURE__*/
@@ -116,17 +118,14 @@ const ListItem =
   children,
   activeClassName,
   ...otherProps
-}) => _react.default.createElement("div", otherProps, children)).withConfig({
-  displayName: "List__ListItem",
-  componentId: "sc-10dx7oa-5"
-})(["", ";"], ({
+}) => _react.default.createElement("div", otherProps, children))(({
   as,
   cssOverrides,
   dense,
   disabled,
   onClick,
   size = _CommonStyles.Sizes.DP24
-}) => (0, _styledComponents.css)(["", ";", ";", ";align-items:center;box-sizing:border-box;color:", ";flex-shrink:0;min-height:", "px;padding:0 ", "px;position:relative;text-transform:initial;&:hover,&:focus,&:active{text-decoration:none;}", ";"], !(0, _primitiveGuards.isNil)(onClick) || !(0, _primitiveGuards.isNil)(as) ? (0, _styledComponents.css)(["background:transparent;color:", ";cursor:pointer;text-transform:none;user-select:none;", ";&:hover,&.is-active{background:hsla(225,6%,13%,0.06);}&:active{background:#e0eafd;opacity:1;}&.is-active,&:active,&:active ", ",&.is-active ", "{color:", ";}", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), _CommonStyles.buttonTransition, ListItemGraphic, ListItemGraphic, (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), (0, _CommonStyles.baseFocusStyles)()) : (0, _styledComponents.css)(["color:", ";background:transparent;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89)), disabled && (0, _styledComponents.css)(["opacity:0.54;pointer-events:none;"]), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), size, dense ? 4 : 10, cssOverrides));
+}) => (0, _styledComponents.css)(["", ";", ";", ";align-items:center;box-sizing:border-box;color:", ";flex-shrink:0;min-height:", "px;padding:0 ", "px;position:relative;text-transform:initial;&:hover,&:focus,&:active{text-decoration:none;}", ";"], !(0, _typeGuards.isNil)(onClick) || !(0, _typeGuards.isNil)(as) ? (0, _styledComponents.css)(["background:transparent;color:", ";cursor:pointer;text-transform:none;user-select:none;", ";&:hover,&.is-active{background:hsla(225,6%,13%,0.06);}&:active{background:#e0eafd;opacity:1;}&.is-active,&:active,&:active ", ",&.is-active ", "{color:", ";}", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), _CommonStyles.buttonTransition, ListItemGraphic, ListItemGraphic, (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), (0, _CommonStyles.baseFocusStyles)()) : (0, _styledComponents.css)(["color:", ";background:transparent;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89)), disabled && (0, _styledComponents.css)(["opacity:0.54;pointer-events:none;"]), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89), size, dense ? 4 : 10, cssOverrides));
 exports.ListItem = ListItem;
 ListItem.defaultProps = {
   activeClassName: 'is-active'
@@ -145,10 +144,10 @@ const SimpleListItem = ({
 }) => _react.default.createElement(ListItem, _extends({
   dense: dense,
   size: size
-}, otherProps), !(0, _primitiveGuards.isNil)(leftIcon) && _react.default.createElement(ListItemGraphic, {
+}, otherProps), !(0, _typeGuards.isNil)(leftIcon) && _react.default.createElement(ListItemGraphic, {
   icon: leftIcon,
   dense: dense
-}), (0, _primitiveGuards.isNil)(secondaryText) || (0, _primitiveGuards.isNil)(meta) ? _react.default.createElement(ListItemPrimaryText, null, primaryText) : _react.default.createElement(ListItemText, null, _react.default.createElement(ListItemPrimaryText, null, primaryText), (0, _primitiveGuards.isNil)(secondaryText) ? null : _react.default.createElement(ListItemSecondaryText, null, secondaryText), meta), !(0, _primitiveGuards.isNil)(rightIcon) && _react.default.createElement(ListItemGraphic, {
+}), (0, _typeGuards.isNil)(secondaryText) || (0, _typeGuards.isNil)(meta) ? _react.default.createElement(ListItemPrimaryText, null, primaryText) : _react.default.createElement(ListItemText, null, _react.default.createElement(ListItemPrimaryText, null, primaryText), (0, _typeGuards.isNil)(secondaryText) ? null : _react.default.createElement(ListItemSecondaryText, null, secondaryText), meta), !(0, _typeGuards.isNil)(rightIcon) && _react.default.createElement(ListItemGraphic, {
   icon: rightIcon,
   dense: dense
 }), children);
diff --git a/dist/menu/Menu.d.ts b/dist/menu/Menu.d.ts
index c1ece2fb9..29591d3f9 100644
--- a/dist/menu/Menu.d.ts
+++ b/dist/menu/Menu.d.ts
@@ -1,22 +1,19 @@
-import React, { Component, ReactNode } from 'react';
-import { SimpleInterpolation } from 'styled-components';
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
+import React, { Component } from 'react';
 import { PopOverChildProps } from '@monorail/popOver/PopOver';
-declare type MenuProps = {
-    children: ReactNode;
-    cssOverrides?: SimpleInterpolation;
-    width: string;
-};
 declare type Props = PopOverChildProps & {
     width?: number;
+    zIndex: number;
 };
 declare type State = {
     menuHeight: number;
     menuWidth: number;
 };
 export declare class Menu extends Component<Props, State> {
+    static defaultProps: {
+        zIndex: number;
+    };
     state: State;
-    menuRef: React.RefObject<StyledHtmlElement<HTMLDivElement, MenuProps, unknown>>;
+    menuRef: React.RefObject<HTMLDivElement>;
     componentDidMount(): void;
     componentDidUpdate(): void;
     updateMenuHeight: () => void;
diff --git a/dist/menu/Menu.js b/dist/menu/Menu.js
index fe96aa2d6..18baaa83f 100644
--- a/dist/menu/Menu.js
+++ b/dist/menu/Menu.js
@@ -15,26 +15,26 @@ var _Overlay = require("../toggle/Overlay");
 
 var _Option = require("fp-ts/lib/Option");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 const CCMenu =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Menu__CCMenu",
   componentId: "qsgmyf-0"
-})(["", ";", ";", ";background:", ";overflow:hidden;position:fixed;width:", ";min-width:", "px;", ";"], (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Medium), (0, _CommonStyles.flexFlow)(), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation6), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), ({
-  width
-}) => width, _CommonStyles.sizes.menu.width, ({
+})(({
+  width,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";", ";background:", ";overflow:hidden;position:fixed;width:", ";min-width:", "px;", ";"], (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Medium), (0, _CommonStyles.flexFlow)(), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation6), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), width, _CommonStyles.sizes.menu.width, cssOverrides));
+
 const MenuContent =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Menu__MenuContent",
   componentId: "qsgmyf-1"
-})(["", ";"], ({
+})(({
   cssOverrides
 }) => (0, _styledComponents.css)(["", ";height:100%;overflow:auto;padding:4px 0;width:100%;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
 
@@ -84,7 +84,8 @@ class Menu extends _react.Component {
       onClick,
       children,
       width,
-      togglePopOver
+      togglePopOver,
+      zIndex
     } = this.props;
     const {
       menuHeight,
@@ -92,7 +93,7 @@ class Menu extends _react.Component {
     } = this.state;
     const scaleAnimation = (0, _CommonStyles.generateScaleAnimation)({
       elementHeight: menuHeight,
-      elementWidth: Math.max((0, _primitiveGuards.isNil)(width) ? menuWidth : width, _CommonStyles.sizes.menu.width),
+      elementWidth: Math.max((0, _typeGuards.isNil)(width) ? menuWidth : width, _CommonStyles.sizes.menu.width),
       isOpen,
       position
     });
@@ -102,9 +103,10 @@ class Menu extends _react.Component {
       overlayProps: {
         chromeless: true
       },
-      togglePopOver: togglePopOver
+      togglePopOver: togglePopOver,
+      zIndex: zIndex
     }, _react.default.createElement(CCMenu, {
-      width: (0, _primitiveGuards.isNil)(width) ? 'auto' : `${width}px`,
+      width: (0, _typeGuards.isNil)(width) ? 'auto' : `${width}px`,
       ref: this.menuRef,
       cssOverrides: scaleAnimation.outSideContentStyles
     }, _react.default.createElement(MenuContent, {
@@ -114,4 +116,7 @@ class Menu extends _react.Component {
 
 }
 
-exports.Menu = Menu;
\ No newline at end of file
+exports.Menu = Menu;
+Menu.defaultProps = {
+  zIndex: 9998
+};
\ No newline at end of file
diff --git a/dist/modals/FullScreenModal.js b/dist/modals/FullScreenModal.js
index 649c203fe..2d457bb71 100644
--- a/dist/modals/FullScreenModal.js
+++ b/dist/modals/FullScreenModal.js
@@ -13,7 +13,7 @@ var _Modals = require("./Modals");
 
 var _Overlay = require("../toggle/Overlay");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
@@ -38,7 +38,7 @@ class FullScreenModal extends _react.Component {
       togglePopOver: togglePopOver
     }, _react.default.createElement(_Modals.BBModalBackground, {
       cssOverrides: (0, _styledComponents.css)(["height:100%;width:100%;margin:0;border-radius:0;"])
-    }, (0, _primitiveGuards.isNil)(noHeader) && _react.default.createElement(_Modals.BBModalHeader, {
+    }, (0, _typeGuards.isNil)(noHeader) && _react.default.createElement(_Modals.BBModalHeader, {
       customCloseButton: customCloseButton,
       headerRowChildren: headerChildren,
       iconLeft: iconLeft,
diff --git a/dist/modals/MediumModal.d.ts b/dist/modals/MediumModal.d.ts
index c2919bb49..d3e1d5a58 100644
--- a/dist/modals/MediumModal.d.ts
+++ b/dist/modals/MediumModal.d.ts
@@ -1,8 +1,10 @@
 import { Component } from 'react';
 import { PopOverChildProps } from '@monorail/popOver/PopOver';
+import { SimpleInterpolation } from 'styled-components';
 declare type Props = PopOverChildProps & {
     title: string;
     iconLeft?: string;
+    headerStyles?: SimpleInterpolation;
 };
 export declare class MediumModal extends Component<Props> {
     render(): JSX.Element;
diff --git a/dist/modals/MediumModal.js b/dist/modals/MediumModal.js
index 03c563264..50eaed231 100644
--- a/dist/modals/MediumModal.js
+++ b/dist/modals/MediumModal.js
@@ -21,7 +21,8 @@ class MediumModal extends _react.Component {
       children,
       title,
       iconLeft,
-      togglePopOver
+      togglePopOver,
+      headerStyles
     } = this.props;
     return _react.default.createElement(_Overlay.Overlay, {
       isOpen: isOpen,
@@ -30,7 +31,8 @@ class MediumModal extends _react.Component {
     }, _react.default.createElement(_Modals.BBModalBackground, null, _react.default.createElement(_Modals.BBModalHeader, {
       title: title,
       iconLeft: iconLeft,
-      onClose: onClick
+      onClose: onClick,
+      cssOverrides: headerStyles
     }), children));
   }
 
diff --git a/dist/modals/Modals.d.ts b/dist/modals/Modals.d.ts
index c7c365e1c..147d5efb4 100644
--- a/dist/modals/Modals.d.ts
+++ b/dist/modals/Modals.d.ts
@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode, StatelessComponent } from 'react';
+import { MouseEvent, ReactNode, StatelessComponent } from 'react';
 import { AppName } from '@monorail/CommonStyles';
 import { SimpleInterpolation } from 'styled-components';
 import { CommonComponentType } from '@monorail/types';
@@ -6,7 +6,7 @@ declare type BBModalSize = {
     mini?: boolean;
 };
 export declare type BBModalBackgroundProps = BBModalSize & CommonComponentType;
-export declare const BBModalBackground: import("styled-components").StyledComponentClass<BBModalBackgroundProps, any, BBModalSize & CommonComponentType & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const BBModalBackground: import("styled-components").StyledComponent<"div", any, BBModalBackgroundProps, never>;
 declare type BBModalHeaderProps = BBModalSize & {
     appIcon?: AppName;
     customCloseButton?: ReactNode;
@@ -15,26 +15,21 @@ declare type BBModalHeaderProps = BBModalSize & {
     iconRight?: string;
     onClose?: (event: MouseEvent) => void;
     title: string;
+    cssOverrides?: SimpleInterpolation;
 };
 export declare const DefaultCloseButton: ({ headerRowChildren, onClose, }: Pick<BBModalHeaderProps, "headerRowChildren" | "onClose">) => JSX.Element;
 export declare const BBModalHeader: StatelessComponent<BBModalHeaderProps>;
-export declare const BBModalFooter: import("styled-components").StyledComponentClass<{}, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const BBModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare type BBModalOverlayProps = CommonComponentType & {
     isOpen: boolean;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
     chromeless?: boolean;
 };
 export declare const BBModalOverlay: StatelessComponent<BBModalOverlayProps>;
-export declare const BBModalContainer: import("styled-components").StyledComponentClass<CommonComponentType & {
-    isOpen: boolean;
-    usesScaleAnimation: boolean;
-}, any, CommonComponentType & {
+export declare const BBModalContainer: import("styled-components").StyledComponent<"div", any, CommonComponentType & {
     isOpen: boolean;
     usesScaleAnimation: boolean;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
-export declare const BBModalContent: import("styled-components").StyledComponentClass<{
-    cssOverrides?: SimpleInterpolation;
-}, any, {
-    cssOverrides?: SimpleInterpolation;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+    zIndex?: number | undefined;
+}, never>;
+export declare const BBModalContent: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
 export {};
diff --git a/dist/modals/Modals.js b/dist/modals/Modals.js
index 86c34010f..eb1b16f07 100644
--- a/dist/modals/Modals.js
+++ b/dist/modals/Modals.js
@@ -30,16 +30,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 */
 const BBModalBackground =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Modals__BBModalBackground",
   componentId: "sc-1y5a2ts-0"
-})(["", ";", ";", ";", ";background:", ";overflow:hidden;width:", "px;position:relative;will-change:transform;", ";"], ({
-  mini
-}) => mini && (0, _styledComponents.css)(["height:", "px;"], _CommonStyles.sizes.modals.mini.height), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.XLarge), (0, _CommonStyles.flexFlow)(), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation24), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), ({
-  mini
-}) => mini ? _CommonStyles.sizes.modals.mini.width : 584, ({
+})(({
+  mini,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";", ";", ";background:", ";overflow:hidden;width:", "px;position:relative;will-change:transform;", ";"], mini && (0, _styledComponents.css)(["height:", "px;"], _CommonStyles.sizes.modals.mini.height), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.XLarge), (0, _CommonStyles.flexFlow)(), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation24), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), mini ? _CommonStyles.sizes.modals.mini.width : 584, cssOverrides));
 /*
 *
 * Modal Header
@@ -50,33 +47,37 @@ const BBModalBackground =
 * Styles
 */
 
+
 exports.BBModalBackground = BBModalBackground;
+
 const BBModalHeaderContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Modals__BBModalHeaderContainer",
   componentId: "sc-1y5a2ts-1"
-})(["", ";", ";background:", ";flex-shrink:0;user-select:none;z-index:1;", "{", ";}"], ({
-  mini
-}) => (0, _CommonStyles.flexFlow)(mini ? 'column' : 'row'), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation2), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), _Search.BBSearchContainer, ({
-  mini
-}) => mini ? (0, _styledComponents.css)(["margin:8px 16px 16px;"]) : (0, _styledComponents.css)(["margin:auto 16px auto auto;"]));
+})(({
+  mini,
+  cssOverrides
+}) => (0, _styledComponents.css)(["", ";", ";background:", ";flex-shrink:0;user-select:none;z-index:1;", "{", ";}", ";"], (0, _CommonStyles.flexFlow)(mini ? 'column' : 'row'), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation2), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), _Search.BBSearchContainer, mini ? (0, _styledComponents.css)(["margin:8px 16px 16px;"]) : (0, _styledComponents.css)(["margin:auto 16px auto auto;"]), cssOverrides));
+
 const BBModalHeaderRow =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Modals__BBModalHeaderRow",
   componentId: "sc-1y5a2ts-2"
-})(["", ";align-items:center;height:", "px;padding:0 16px;width:100%;"], (0, _CommonStyles.flexFlow)('row'), ({
+})(({
   mini
-}) => mini ? 48 : 56);
+}) => (0, _styledComponents.css)(["", ";align-items:center;height:", "px;padding:0 16px;width:100%;"], (0, _CommonStyles.flexFlow)('row'), mini ? 48 : 56));
+
 const BBModalHeaderTitle =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "Modals__BBModalHeaderTitle",
   componentId: "sc-1y5a2ts-3"
-})(["", ";color:", ";white-space:nowrap;margin:0;"], ({
+})(({
   mini
-}) => mini ? (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title4) : (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title3), (0, _CommonStyles.colors)(_CommonStyles.Colors.White));
+}) => (0, _styledComponents.css)(["", ";color:", ";white-space:nowrap;margin:0;"], mini ? (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title4) : (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title3), (0, _CommonStyles.colors)(_CommonStyles.Colors.White)));
+
 const baseIconStyles =
 /*#__PURE__*/
 (0, _styledComponents.css)(["color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White));
@@ -128,9 +129,11 @@ const BBModalHeader = ({
   iconRight,
   mini,
   onClose,
-  title
+  title,
+  cssOverrides
 }) => _react.default.createElement(BBModalHeaderContainer, {
-  mini: mini
+  mini: mini,
+  cssOverrides: cssOverrides
 }, _react.default.createElement(BBModalHeaderRow, {
   mini: mini
 }, appIcon && _react.default.createElement(StyledAppIconLeft, {
@@ -158,9 +161,10 @@ const BBModalHeader = ({
 
 
 exports.BBModalHeader = BBModalHeader;
+
 const BBModalFooter =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Modals__BBModalFooter",
   componentId: "sc-1y5a2ts-7"
 })(["", ";", ";align-items:center;background:", ";height:48px;justify-content:flex-end;margin:auto 0 0;padding:0 16px;flex-shrink:0;"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation6), (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey98));
@@ -174,23 +178,24 @@ const BBModalFooter =
 * Styles
 */
 
+
 exports.BBModalFooter = BBModalFooter;
+
 const BBModalOverlayContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Modals__BBModalOverlayContainer",
   componentId: "sc-1y5a2ts-8"
-})(["", ";", ";bottom:0;cursor:pointer;left:0;position:fixed;right:0;top:0;transition:all ease 150ms;", ";"], ({
-  isOpen
-}) => (0, _CommonStyles.visible)(isOpen), ({
-  chromeless
-}) => !chromeless && (0, _styledComponents.css)(["background:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.36)), ({
+})(({
+  isOpen,
+  chromeless,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";bottom:0;cursor:pointer;left:0;position:fixed;right:0;top:0;transition:all ease 150ms;", ";"], (0, _CommonStyles.visible)(isOpen), !chromeless && (0, _styledComponents.css)(["background:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.36)), cssOverrides));
 /*
 * Types
 */
 
+
 /*
 * Component
 */
@@ -222,16 +227,18 @@ const BBModalOverlay = ({
 
 
 exports.BBModalOverlay = BBModalOverlay;
+
 const BBModalContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Modals__BBModalContainer",
   componentId: "sc-1y5a2ts-9"
-})(["", ";"], ({
+})(({
   isOpen,
   usesScaleAnimation,
-  cssOverrides
-}) => (0, _styledComponents.css)(["", ";", ";", ";align-items:center;bottom:0;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:9998;", ";", ";"], isOpen ? (0, _styledComponents.css)(["pointer-events:all;"]) : (0, _styledComponents.css)(["pointer-events:none;"]), (0, _CommonStyles.flexFlow)(), _CommonStyles.gothamFontFamily, !usesScaleAnimation && (0, _styledComponents.css)(["", "{", ";", ";transition:all ease 100ms;}"], BBModalBackground, isOpen ? (0, _styledComponents.css)(["transform:scale(1) translateY(0);"]) : (0, _styledComponents.css)(["transform:scale(0.8) translateY(64px);"]), (0, _CommonStyles.visible)(isOpen)), cssOverrides));
+  cssOverrides,
+  zIndex
+}) => (0, _styledComponents.css)(["", ";", ";", ";align-items:center;bottom:0;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:", ";", ";", ";"], isOpen ? (0, _styledComponents.css)(["pointer-events:all;"]) : (0, _styledComponents.css)(["pointer-events:none;"]), (0, _CommonStyles.flexFlow)(), _CommonStyles.gothamFontFamily, zIndex, !usesScaleAnimation && (0, _styledComponents.css)(["", "{", ";", ";transition:all ease 100ms;}"], BBModalBackground, isOpen ? (0, _styledComponents.css)(["transform:scale(1) translateY(0);"]) : (0, _styledComponents.css)(["transform:scale(0.8) translateY(64px);"]), (0, _CommonStyles.visible)(isOpen)), cssOverrides));
 /*
 *
 * Modal Content
@@ -242,13 +249,16 @@ const BBModalContainer =
 * Styles
 */
 
+
 exports.BBModalContainer = BBModalContainer;
+
 const BBModalContent =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Modals__BBModalContent",
   componentId: "sc-1y5a2ts-10"
-})(["", ";height:100%;max-height:100%;overflow:auto;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";height:100%;max-height:100%;overflow:auto;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
+
 exports.BBModalContent = BBModalContent;
\ No newline at end of file
diff --git a/dist/package.json b/dist/package.json
index a4fc5ceba..532e1befb 100644
--- a/dist/package.json
+++ b/dist/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@simspace/monorail",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "SimSpace Design System",
   "resolutions": {
-    "@types/react": "16.8.2",
-    "@types/react-dom": "16.8.0",
-    "fp-ts": "1.13.0",
-    "monocle-ts": "1.5.3"
+    "@types/react": "16.8.10",
+    "@types/react-dom": "16.8.3",
+    "fp-ts": "1.15.0",
+    "lodash": "4.17.11",
+    "monocle-ts": "1.7.1"
   },
   "engines": {
     "node": "10.15.1"
@@ -31,42 +32,44 @@
   "homepage": "https://github.com/Simspace/monorail#readme",
   "dependencies": {},
   "peerDependencies": {
-    "fp-ts": "^1.13.0",
+    "fp-ts": "1.15.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-router": "^3.2.0",
     "styled-components": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.1.2",
-    "@babel/core": "7.1.2",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/plugin-proposal-decorators": "7.1.2",
-    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
-    "@babel/plugin-transform-react-constant-elements": "7.0.0",
-    "@babel/plugin-transform-react-inline-elements": "7.0.0",
-    "@babel/preset-env": "7.1.0",
+    "@babel/cli": "7.2.3",
+    "@babel/core": "7.3.4",
+    "@babel/plugin-proposal-class-properties": "7.3.4",
+    "@babel/plugin-proposal-decorators": "7.3.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.3.4",
+    "@babel/plugin-transform-react-constant-elements": "7.2.0",
+    "@babel/plugin-transform-react-inline-elements": "7.2.0",
+    "@babel/preset-env": "7.3.4",
     "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "7.1.0",
+    "@babel/preset-typescript": "7.3.3",
     "@babel/register": "7.0.0",
     "@types/jest": "23.1.5",
-    "@types/react": "16.8.2",
-    "@types/react-dom": "16.8.0",
+    "@types/react": "16.8.10",
+    "@types/react-dom": "16.8.3",
     "@types/react-router": "3",
-    "@types/styled-components": "4.0.3",
-    "babel-plugin-module-resolver": "3.1.1",
+    "@types/styled-components": "4.1.12",
+    "autoprefixer": "9.4.10",
+    "babel-plugin-macros": "2.5.0",
+    "babel-plugin-module-resolver": "3.2.0",
     "babel-plugin-styled-components": "1.10.0",
-    "fp-ts": "1.13.0",
+    "fp-ts": "1.15.0",
     "io-ts": "1.7.1",
     "io-ts-types": "0.4.2",
-    "monocle-ts": "1.5.3",
-    "react": "16.8.1",
+    "monocle-ts": "1.7.1",
+    "react": "16.8.6",
     "react-datetime": "2.14.0",
-    "react-dom": "16.8.1",
+    "react-dom": "16.8.6",
     "react-pose": "4.0.5",
     "react-router": "3.2.1",
-    "styled-components": "4.1.2",
+    "styled-components": "4.2.0",
     "typelevel-ts": "0.3.4",
-    "typescript": "3.2.2"
+    "typescript": "3.3.4000"
   }
 }
diff --git a/dist/pageHeader/PageHeader.d.ts b/dist/pageHeader/PageHeader.d.ts
index 4416b3058..abe00627b 100644
--- a/dist/pageHeader/PageHeader.d.ts
+++ b/dist/pageHeader/PageHeader.d.ts
@@ -1,12 +1,8 @@
 import React, { Component, MouseEvent as ReactMouseEvent, ReactNode, RefObject } from 'react';
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
 import { CommonComponentType } from '@monorail/types';
-export declare const TitleContainer: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {
     hasAboveContent: boolean;
-}, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    hasAboveContent: boolean;
-}>;
-export declare type PageHeaderShadowRefType = StyledHtmlElement<HTMLDivElement, PageHeaderShadowProps>;
+}, never>;
 export declare type PageHeaderShadowProps = {
     willAnimateShadow: boolean;
     flush: boolean;
@@ -17,15 +13,11 @@ declare type BreadCrumbsContainerProps = {
         path?: (event: ReactMouseEvent<HTMLAnchorElement>) => void;
     }>;
 };
-declare type PageHeaderContainerProps = CommonComponentType & {
-    flush: boolean;
-    hasAboveContent: boolean;
-};
 declare type PageHeaderProps = CommonComponentType & BreadCrumbsContainerProps & {
     goBack?: (event: ReactMouseEvent<Element>) => void;
     title: string;
     action?: ReactNode;
-    shadowRef?: RefObject<PageHeaderShadowRefType>;
+    shadowRef?: RefObject<HTMLDivElement>;
     willAnimateShadow: boolean;
     flush: boolean;
 };
@@ -34,7 +26,7 @@ export declare class PageHeader extends Component<PageHeaderProps> {
         willAnimateShadow: boolean;
         flush: boolean;
     };
-    pageHeaderContainerRef: React.RefObject<StyledHtmlElement<HTMLDivElement, PageHeaderContainerProps, unknown>>;
+    pageHeaderContainerRef: React.RefObject<HTMLDivElement>;
     renderBreadCrumbs: () => (false | JSX.Element)[][] | null;
     render(): JSX.Element;
 }
diff --git a/dist/pageHeader/PageHeader.js b/dist/pageHeader/PageHeader.js
index f942866f7..f9907cea6 100644
--- a/dist/pageHeader/PageHeader.js
+++ b/dist/pageHeader/PageHeader.js
@@ -15,7 +15,7 @@ var _Icon = require("../icon/Icon");
 
 var _buttonTypes = require("../buttons/buttonTypes");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 var _Button = require("../buttons/Button");
 
@@ -28,16 +28,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 */
 const PageHeaderContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "PageHeader__PageHeaderContainer",
   componentId: "sc-1tofzk7-0"
-})(["", ";background:", ";flex-shrink:0;overflow:visible;position:relative;z-index:1;&::before{", ";background:", ";bottom:0;content:'';left:0;position:absolute;right:0;top:0;z-index:-5;}", "{padding:0 24px;", ";}", ";"], (0, _CommonStyles.flexFlow)('column'), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), ({
-  flush
-}) => flush && (0, _styledComponents.css)(["border-bottom:1px solid ", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94)), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), _TabBar.TabBarContainer, ({
+})(({
+  flush,
+  cssOverrides,
   hasAboveContent
-}) => !hasAboveContent && (0, _styledComponents.css)(["margin-top:-8px;"]), ({
-  cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";background:", ";flex-shrink:0;overflow:visible;position:relative;z-index:1;&::before{", ";background:", ";bottom:0;content:'';left:0;position:absolute;right:0;top:0;z-index:-5;}", "{padding:0 24px;", ";}", ";"], (0, _CommonStyles.flexFlow)('column'), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), flush && (0, _styledComponents.css)(["border-bottom:1px solid ", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94)), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), _TabBar.TabBarContainer, !hasAboveContent && (0, _styledComponents.css)(["margin-top:-8px;"]), cssOverrides));
+
 const pageHeaderPadding =
 /*#__PURE__*/
 (0, _styledComponents.css)(["padding:0 32px;"]);
@@ -47,10 +46,10 @@ const PageHeaderShadow =
 _styledComponents.default.div.withConfig({
   displayName: "PageHeader__PageHeaderShadow",
   componentId: "sc-1tofzk7-1"
-})(["", ";background:", ";bottom:6px;content:'';left:-2px;position:absolute;right:-2px;top:0;z-index:-10;", ";"], (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation6), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), ({
+})(({
   willAnimateShadow,
   flush
-}) => (flush || willAnimateShadow) && (0, _styledComponents.css)(["opacity:0;"]));
+}) => (0, _styledComponents.css)(["", ";background:", ";bottom:6px;content:'';left:-2px;position:absolute;right:-2px;top:0;z-index:-10;", ";"], (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation6), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (flush || willAnimateShadow) && (0, _styledComponents.css)(["opacity:0;"])));
 
 const BreadCrumbsContainer =
 /*#__PURE__*/
@@ -71,14 +70,15 @@ const TitleContainer =
 _styledComponents.default.div.withConfig({
   displayName: "PageHeader__TitleContainer",
   componentId: "sc-1tofzk7-4"
-})(["", ";"], ({
+})(({
   hasAboveContent
 }) => (0, _styledComponents.css)(["", ";", ";align-items:center;flex-shrink:0;grid-column:-1 / 1;height:", "px;"], (0, _CommonStyles.flexFlow)('row'), pageHeaderPadding, hasAboveContent ? 48 : 64));
 
 exports.TitleContainer = TitleContainer;
+
 const Title =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "PageHeader__Title",
   componentId: "sc-1tofzk7-5"
 })(["", ";color:", ";margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title1), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue));
@@ -86,6 +86,7 @@ const Title =
 * Types
 */
 
+
 /*
 * Components
 */
@@ -129,17 +130,17 @@ class PageHeader extends _react.Component {
       title,
       willAnimateShadow
     } = this.props;
-    const hasAboveContent = !(0, _primitiveGuards.isNil)(breadCrumbs) || !(0, _primitiveGuards.isNil)(goBack);
+    const hasAboveContent = !(0, _typeGuards.isNil)(breadCrumbs) || !(0, _typeGuards.isNil)(goBack);
     return _react.default.createElement(PageHeaderContainer, {
       cssOverrides: (0, _styledComponents.css)(["", ";"], cssOverrides),
       hasAboveContent: hasAboveContent,
       ref: this.pageHeaderContainerRef,
       flush: flush
-    }, (!(0, _primitiveGuards.isNil)(breadCrumbs) || !(0, _primitiveGuards.isNil)(goBack)) && _react.default.createElement(BreadCrumbsContainer, null, goBack && _react.default.createElement(_Button.Button, {
+    }, (!(0, _typeGuards.isNil)(breadCrumbs) || !(0, _typeGuards.isNil)(goBack)) && _react.default.createElement(BreadCrumbsContainer, null, goBack && _react.default.createElement(_Button.Button, {
       size: _buttonTypes.ButtonSize.Compact,
       display: _buttonTypes.ButtonDisplay.Chromeless,
       onClick: goBack,
-      cssOverrides: (0, _styledComponents.css)(["margin-left:-4px;"])
+      cssOverrides: (0, _styledComponents.css)(["margin-left:-4px;margin-right:8px;"])
     }, _react.default.createElement(_Icon.Icon, {
       icon: "circle_arrow_left"
     }), "Go Back"), this.renderBreadCrumbs()), _react.default.createElement(TitleContainer, {
diff --git a/dist/portal/Portal.js b/dist/portal/Portal.js
index e59c92538..2f575a8f1 100644
--- a/dist/portal/Portal.js
+++ b/dist/portal/Portal.js
@@ -9,14 +9,14 @@ var _react = require("react");
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
  * Creates a modal-root at body level if it doesn't exist already
  */
-if ((0, _primitiveGuards.isNil)(document.getElementById('modal-root'))) {
+if ((0, _typeGuards.isNil)(document.getElementById('modal-root'))) {
   const newModalRoot = document.createElement('div');
   newModalRoot.setAttribute('id', 'modal-root');
   document.body.appendChild(newModalRoot);
@@ -25,8 +25,8 @@ if ((0, _primitiveGuards.isNil)(document.getElementById('modal-root'))) {
 class Portal extends _react.Component {
   constructor(...args) {
     super(...args);
-    this.modalRoot = !(0, _primitiveGuards.isNil)(this.props.document) ? this.props.document.getElementById('modal-root') : document.getElementById('modal-root');
-    this.portalElement = !(0, _primitiveGuards.isNil)(this.props.document) ? this.props.document.createElement('span') : document.createElement('div');
+    this.modalRoot = !(0, _typeGuards.isNil)(this.props.document) ? this.props.document.getElementById('modal-root') : document.getElementById('modal-root');
+    this.portalElement = !(0, _typeGuards.isNil)(this.props.document) ? this.props.document.createElement('span') : document.createElement('div');
   }
 
   componentDidMount() {
@@ -38,13 +38,13 @@ class Portal extends _react.Component {
     // DOM node, or uses 'autoFocus' in a descendant, add
     // state to Modal and only render the children when Modal
     // is inserted in the DOM tree.
-    if (!(0, _primitiveGuards.isNil)(this.modalRoot)) {
+    if (!(0, _typeGuards.isNil)(this.modalRoot)) {
       this.modalRoot.appendChild(this.portalElement);
     }
   }
 
   componentWillUnmount() {
-    if (!(0, _primitiveGuards.isNil)(this.modalRoot)) {
+    if (!(0, _typeGuards.isNil)(this.modalRoot)) {
       this.modalRoot.removeChild(this.portalElement);
     }
   }
diff --git a/dist/CoreUtils/SerializableMap.d.ts b/dist/sharedHelpers/SerializableMap.d.ts
similarity index 92%
rename from dist/CoreUtils/SerializableMap.d.ts
rename to dist/sharedHelpers/SerializableMap.d.ts
index 10d4a8c57..b0e9c7dd5 100644
--- a/dist/CoreUtils/SerializableMap.d.ts
+++ b/dist/sharedHelpers/SerializableMap.d.ts
@@ -3,7 +3,7 @@ import { Option } from 'fp-ts/lib/Option';
  * A subtype of an ES6 Map which is serializable (for viewing in Redux state)
  */
 export declare class SerializableMap<K extends string, V> extends Map<K, V> {
-    constructor(pair: ReadonlyArray<[K, V]>);
+    constructor(pairs: ReadonlyArray<[K, V]>);
     /**
      * A safe version of the `get` method of an ES6 Map which returns an Option
      */
diff --git a/dist/CoreUtils/SerializableMap.js b/dist/sharedHelpers/SerializableMap.js
similarity index 91%
rename from dist/CoreUtils/SerializableMap.js
rename to dist/sharedHelpers/SerializableMap.js
index 4371e57e3..76c000921 100644
--- a/dist/CoreUtils/SerializableMap.js
+++ b/dist/sharedHelpers/SerializableMap.js
@@ -11,12 +11,14 @@ var _Option = require("fp-ts/lib/Option");
 
 var _Record = require("fp-ts/lib/Record");
 
+// TODO: Rewrite Wizard code that uses this and then delete this
+
 /**
  * A subtype of an ES6 Map which is serializable (for viewing in Redux state)
  */
 class SerializableMap extends Map {
-  constructor(pair) {
-    super(pair);
+  constructor(pairs) {
+    super(pairs);
     this.lookup = this.lookup.bind(this);
     this.toJSON = this.toJSON.bind(this);
     this.toRecord = this.toRecord.bind(this);
diff --git a/dist/CoreUtils/__tests__/Array.jest.d.ts b/dist/sharedHelpers/__tests__/apiActions.jest.d.ts
similarity index 100%
rename from dist/CoreUtils/__tests__/Array.jest.d.ts
rename to dist/sharedHelpers/__tests__/apiActions.jest.d.ts
diff --git a/dist/sharedHelpers/__tests__/apiActions.jest.js b/dist/sharedHelpers/__tests__/apiActions.jest.js
new file mode 100644
index 000000000..7df112fe4
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/apiActions.jest.js
@@ -0,0 +1,73 @@
+"use strict";
+
+var _apiActions = require("../apiActions");
+
+describe('coerceApiActionTypeToString', () => {
+  it('should not change the runtime value', () => {
+    const type = (0, _apiActions.mkApiActionTypes)('GET_USERS').types.success;
+    const actual = (0, _apiActions.coerceApiActionTypeToString)(type);
+    const expected = 'GET_USERS_SUCCESS';
+    expect(actual).toBe(expected);
+  });
+});
+describe('mkApiActionTypes', () => {
+  const {
+    guards,
+    prisms,
+    types
+  } = (0, _apiActions.mkApiActionTypes)('GET_USERS');
+  describe('types', () => {
+    it('should contain the correct types', () => {
+      expect(types.optimistic).toBe('GET_USERS_OPTIMISTIC');
+      expect(types.request).toBe('GET_USERS_REQUEST');
+      expect(types.success).toBe('GET_USERS_SUCCESS');
+      expect(types.failure).toBe('GET_USERS_FAILURE');
+    });
+  });
+  describe('guards', () => {
+    it('should guard types correctly', () => {
+      expect(guards.isOptimistic(types.optimistic)).toBe(true);
+      expect(guards.isRequest(types.request)).toBe(true);
+      expect(guards.isSuccess(types.success)).toBe(true);
+      expect(guards.isFailure(types.failure)).toBe(true);
+      expect(guards.isOptimistic(types.failure)).toBe(false);
+      expect(guards.isRequest(types.failure)).toBe(false);
+      expect(guards.isSuccess(types.failure)).toBe(false);
+      expect(guards.isFailure(types.success)).toBe(false);
+    });
+  });
+  describe('types', () => {
+    it('should contain prisms that function correctly', () => {
+      expect(prisms.optimistic.getOption('GET_USERS_OPTIMISTIC').isSome()).toBe(true);
+      expect(prisms.request.getOption('GET_USERS_REQUEST').isSome()).toBe(true);
+      expect(prisms.success.getOption('GET_USERS_SUCCESS').isSome()).toBe(true);
+      expect(prisms.failure.getOption('GET_USERS_FAILURE').isSome()).toBe(true);
+      expect(prisms.optimistic.getOption('invalid').isSome()).toBe(false);
+      expect(prisms.request.getOption('invalid').isSome()).toBe(false);
+      expect(prisms.success.getOption('invalid').isSome()).toBe(false);
+      expect(prisms.failure.getOption('invalid').isSome()).toBe(false);
+    });
+  });
+});
+describe('mkApiAction', () => {
+  const {
+    types
+  } = (0, _apiActions.mkApiActionTypes)('GET_USERS');
+  it('should properly construct API actions', () => {
+    const successAction = (0, _apiActions.mkApiAction)(types.success);
+    expect(successAction.type).toBe('GET_USERS_SUCCESS'); // tslint:disable-next-line no-any
+
+    expect(successAction.payload).toBe(undefined); // tslint:disable-next-line no-any
+
+    expect(successAction.meta).toBe(undefined);
+    const failureAction = (0, _apiActions.mkApiAction)(types.failure, 0);
+    expect(failureAction.type).toBe('GET_USERS_FAILURE');
+    expect(failureAction.payload).toBe(0); // tslint:disable-next-line no-any
+
+    expect(failureAction.meta).toBe(undefined);
+    const requestAction = (0, _apiActions.mkApiAction)(types.request, 0, 'info');
+    expect(requestAction.type).toBe('GET_USERS_REQUEST');
+    expect(requestAction.payload).toBe(0);
+    expect(requestAction.meta).toBe('info');
+  });
+});
\ No newline at end of file
diff --git a/dist/CoreUtils/__tests__/json-encoders-decoders.jest.d.ts b/dist/sharedHelpers/__tests__/jsonEncodersDecoders.jest.d.ts
similarity index 100%
rename from dist/CoreUtils/__tests__/json-encoders-decoders.jest.d.ts
rename to dist/sharedHelpers/__tests__/jsonEncodersDecoders.jest.d.ts
diff --git a/dist/CoreUtils/__tests__/json-encoders-decoders.jest.js b/dist/sharedHelpers/__tests__/jsonEncodersDecoders.jest.js
similarity index 95%
rename from dist/CoreUtils/__tests__/json-encoders-decoders.jest.js
rename to dist/sharedHelpers/__tests__/jsonEncodersDecoders.jest.js
index c154a2705..dd4fc5a55 100644
--- a/dist/CoreUtils/__tests__/json-encoders-decoders.jest.js
+++ b/dist/sharedHelpers/__tests__/jsonEncodersDecoders.jest.js
@@ -6,7 +6,7 @@ var _Either = require("fp-ts/lib/Either");
 
 var _Option = require("fp-ts/lib/Option");
 
-var _jsonEncodersDecoders = require("../json-encoders-decoders");
+var _jsonEncodersDecoders = require("../jsonEncodersDecoders");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
diff --git a/dist/CoreUtils/api-actions.d.ts b/dist/sharedHelpers/__tests__/newtypes.jest.d.ts
similarity index 100%
rename from dist/CoreUtils/api-actions.d.ts
rename to dist/sharedHelpers/__tests__/newtypes.jest.d.ts
diff --git a/dist/sharedHelpers/__tests__/newtypes.jest.js b/dist/sharedHelpers/__tests__/newtypes.jest.js
new file mode 100644
index 000000000..b1d457148
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/newtypes.jest.js
@@ -0,0 +1,22 @@
+"use strict";
+
+var _newtypes = require("../newtypes");
+
+describe('prismNaN', () => {
+  describe('getOption', () => {
+    it('should return a none if given a non-NaN value', () => {
+      const actual = _newtypes.prismNaN.getOption(3).isNone();
+
+      const expected = true;
+      expect(actual).toEqual(expected);
+    });
+    it('should return a some if given a NaN value', () => {
+      const oops = undefined;
+
+      const actual = _newtypes.prismNaN.getOption(3 / oops).isSome();
+
+      const expected = true;
+      expect(actual).toEqual(expected);
+    });
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/__tests__/optics.jest.d.ts b/dist/sharedHelpers/__tests__/optics.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/optics.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/__tests__/optics.jest.js b/dist/sharedHelpers/__tests__/optics.jest.js
new file mode 100644
index 000000000..3bc9bffe0
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/optics.jest.js
@@ -0,0 +1,75 @@
+"use strict";
+
+var _monocleTs = require("monocle-ts");
+
+var _optics = require("../optics");
+
+const testInterface = {
+  firstName: 'John',
+  lastName: 'Smith',
+  age: 33,
+  address: {
+    street: '123 Lensy ST',
+    city: 'Opticland',
+    postalCode: 12345
+  }
+};
+const testRecord = {
+  '81d9e19a-b936-4715-86c9-43266d0fc2b6': 0,
+  'a67d7ccb-1a5f-4a8b-9d8e-324e98ec853b': 1,
+  '43be4d69-4169-4f30-a6c2-8dd497a0472a': 2
+};
+const testArray = ['a', 'b', 'c', 'd'];
+describe('lensesFromRecord', () => {
+  it('should create a record containing lenses for all top level keys', () => {
+    const lenses = (0, _optics.lensesFromRecord)(testInterface);
+
+    const mkLens = _monocleTs.Lens.fromProp();
+
+    const expected = {
+      firstName: mkLens('firstName'),
+      lastName: mkLens('lastName'),
+      age: mkLens('age'),
+      address: mkLens('address')
+    };
+    expect(JSON.stringify(lenses)).toEqual(JSON.stringify(expected));
+    expect(lenses.address.get(testInterface)).toEqual({
+      street: '123 Lensy ST',
+      city: 'Opticland',
+      postalCode: 12345
+    });
+    expect(lenses.age.get(testInterface)).toBe(33);
+    expect(lenses.firstName.set('Johnathan')(testInterface).firstName).toBe('Johnathan');
+  });
+});
+describe('mkRecordKeyOptional', () => {
+  it('should create a properly functioning Optional for a given key', () => {
+    const testStr = '43be4d69-4169-4f30-a6c2-8dd497a0472a';
+    const testOptional = (0, _optics.mkRecordKeyOptional)(testStr);
+    const opt = testOptional.getOption(testRecord);
+    const actual = opt.isSome() && opt.value === 2;
+    const expected = true;
+    expect(actual).toEqual(expected);
+  });
+});
+describe('mkArrayIndexOptional', () => {
+  it('should create a properly functioning Optional for a given key', () => {
+    const testOptional = (0, _optics.mkArrayIndexOptional)(2);
+    const opt = testOptional.getOption(testArray);
+    const actual = opt.isSome() && opt.value === 'c';
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+});
+describe('oLens', () => {
+  it('should compose two lenses together', () => {
+    const testToAddressLens = _monocleTs.Lens.fromProp()('address');
+
+    const addressToStreetLens = _monocleTs.Lens.fromProp()('street');
+
+    const testToStreetLens = (0, _optics.oLens)(testToAddressLens, addressToStreetLens);
+    const actual = testToStreetLens.get(testInterface);
+    const expected = '123 Lensy ST';
+    expect(actual).toBe(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/__tests__/shallowEqual.jest.d.ts b/dist/sharedHelpers/__tests__/shallowEqual.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/shallowEqual.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/__tests__/shallowEqual.jest.js b/dist/sharedHelpers/__tests__/shallowEqual.jest.js
new file mode 100644
index 000000000..13a356264
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/shallowEqual.jest.js
@@ -0,0 +1,41 @@
+"use strict";
+
+var _shallowEqual = require("../shallowEqual");
+
+describe('shallowEqual', () => {
+  it('should return false for objects that are not shallowly equal', () => {
+    const a = {
+      test: 99,
+      tag: 'testing',
+      nested: {
+        a: 0,
+        b: 1
+      }
+    };
+    const b = {
+      test: 99,
+      tag: 'testing',
+      nested: {
+        b: 1
+      }
+    };
+    const actual = (0, _shallowEqual.shallowEqual)(a, b);
+    const expected = false;
+    expect(actual).toBe(expected);
+  });
+  it('should return true for objects that are shallowly equal', () => {
+    const a = {
+      test: 99,
+      tag: 'testing',
+      nested: 3
+    };
+    const b = {
+      test: 99,
+      tag: 'testing',
+      nested: 3
+    };
+    const actual = (0, _shallowEqual.shallowEqual)(a, b);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/__tests__/strings.jest.d.ts b/dist/sharedHelpers/__tests__/strings.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/strings.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/__tests__/strings.jest.js b/dist/sharedHelpers/__tests__/strings.jest.js
new file mode 100644
index 000000000..963364ba6
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/strings.jest.js
@@ -0,0 +1,98 @@
+"use strict";
+
+var _strings = require("../strings");
+
+describe('split', () => {
+  it('split strings by a character separator', () => {
+    const actual = (0, _strings.split)(/,/g)('t,e,s,t');
+    const expected = ['t', 'e', 's', 't'];
+    expect(actual).toEqual(expected);
+  });
+  it('split strings by a substring', () => {
+    const actual = (0, _strings.split)(/_,_/g)('t_,_e_,_s_,_t');
+    const expected = ['t', 'e', 's', 't'];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('replace', () => {
+  it('should replace a character', () => {
+    const actual = (0, _strings.replace)(/,/g, '_')('t,e,s,t');
+    const expected = 't_e_s_t';
+    expect(actual).toBe(expected);
+  });
+  it('should replace a subtring', () => {
+    const actual = (0, _strings.replace)(/_,_/g, '_')('t_,_e_,_s_,_t');
+    const expected = 't_e_s_t';
+    expect(actual).toBe(expected);
+  });
+  it('should omit a character when passed an empty string', () => {
+    const actual = (0, _strings.replace)(/,/g, '')('t,e,s,t');
+    const expected = 'test';
+    expect(actual).toBe(expected);
+  });
+  it('should omit a substring when passed an empty string', () => {
+    const actual = (0, _strings.replace)(/_,_/g, '')('t_,_e_,_s_,_t');
+    const expected = 'test';
+    expect(actual).toBe(expected);
+  });
+});
+describe('splitName', () => {
+  it('split a name into a first & last key-val pairs', () => {
+    const actual = (0, _strings.splitName)('John Smith');
+    const expected = {
+      first: 'John',
+      last: 'Smith'
+    };
+    expect(actual).toEqual(expected);
+  });
+});
+describe('findIndex', () => {
+  it('should return a none if a substring is not in a string', () => {
+    const actual = (0, _strings.findIndex)('x')('John Smith').isNone();
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return a none if a substring is not in a string', () => {
+    const actual = (0, _strings.findIndex)('xxx')('John Smith').isNone();
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return a some of an index if a char is in a string', () => {
+    const opt = (0, _strings.findIndex)('h')('John Smith');
+    const actual = opt.isSome() && opt.value === 2;
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return a some of an index if a substring is in a string', () => {
+    const opt = (0, _strings.findIndex)('ohn')('John Smith');
+    const actual = opt.isSome() && opt.value === 1;
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+});
+describe('toLower', () => {
+  it('should lowercase a string', () => {
+    const actual = (0, _strings.toLower)('John Smith');
+    const expected = 'john smith';
+    expect(actual).toBe(expected);
+  });
+});
+describe('trim', () => {
+  it('should remove whitespace from around a string', () => {
+    const actual = (0, _strings.trim)('  John Smith    ');
+    const expected = 'John Smith';
+    expect(actual).toBe(expected);
+  });
+});
+describe('join', () => {
+  it('should join strings with no separator when passed empty string', () => {
+    const actual = (0, _strings.join)('', ['t', 'e', 's', 't']);
+    const expected = 'test';
+    expect(actual).toBe(expected);
+  });
+  it('should join strings via a separator', () => {
+    const actual = (0, _strings.join)(',', ['t', 'e', 's', 't']);
+    const expected = 't,e,s,t';
+    expect(actual).toBe(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/__tests__/taggedUnions.d.ts b/dist/sharedHelpers/__tests__/taggedUnions.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/taggedUnions.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/__tests__/taggedUnions.js b/dist/sharedHelpers/__tests__/taggedUnions.js
new file mode 100644
index 000000000..7a5e74312
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/taggedUnions.js
@@ -0,0 +1,154 @@
+"use strict";
+
+var _taggedUnions = require("../taggedUnions");
+
+describe('mkTaggedUnion', () => {
+  const union = (0, _taggedUnions.mkTaggedUnion)()({
+    Just: _taggedUnions.__,
+    Nothing: _taggedUnions.__
+  });
+  describe('constructors', () => {
+    it('should properly construct (Just)', () => {
+      const actual = union.Just({
+        value: 0
+      });
+      const expected = {
+        tag: 'Just',
+        value: 0
+      };
+      expect(actual).toEqual(expected);
+    });
+    it('should properly construct (Nothing)', () => {
+      const actual = union.Nothing();
+      const expected = {
+        tag: 'Nothing'
+      };
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('fold', () => {
+    const f = union.fold({
+      Just: x => x.value + 1,
+      Nothing: () => 0
+    });
+    it('should properly fold the union, covering all cases (Just)', () => {
+      const actual = f(union.Just({
+        value: 3
+      }));
+      const expected = 4;
+      expect(actual).toEqual(expected);
+    });
+    it('should properly fold the union, covering all cases (Nothing)', () => {
+      const actual = f(union.Nothing());
+      const expected = 0;
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('tags', () => {
+    it('should return an array containing the data constructor tags', () => {
+      const actual = union.tags;
+      const expected = ['Just', 'Nothing'];
+      expect(actual).toEqual(expected);
+    });
+  });
+});
+describe('mkActionsUnion', () => {
+  const union = (0, _taggedUnions.mkActionsUnion)()({
+    Yup: _taggedUnions.__,
+    Nope: _taggedUnions.__
+  });
+  describe('constructors', () => {
+    it('should properly construct (Yup)', () => {
+      const actual = union.Yup({
+        value: 0
+      });
+      const expected = {
+        type: 'Yup',
+        value: 0
+      };
+      expect(actual).toEqual(expected);
+    });
+    it('should properly construct (Nope)', () => {
+      const actual = union.Nope();
+      const expected = {
+        type: 'Nope'
+      };
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('fold', () => {
+    const f = union.fold({
+      Yup: x => x.value + 2,
+      Nope: () => 1
+    });
+    it('should properly fold the union, covering all cases (Yup)', () => {
+      const actual = f(union.Yup({
+        value: 4
+      }));
+      const expected = 7;
+      expect(actual).toEqual(expected);
+    });
+    it('should properly fold the union, covering all cases (Nope)', () => {
+      const actual = f(union.Nope());
+      const expected = 1;
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('tags', () => {
+    it('should return an array containing the data constructor tags', () => {
+      const actual = union.tags;
+      const expected = ['Yup', 'Nope'];
+      expect(actual).toEqual(expected);
+    });
+  });
+});
+describe('mkTaggedUnionCustom', () => {
+  const union = (0, _taggedUnions.mkTaggedUnionCustom)()('kind', {
+    Yeah: _taggedUnions.__,
+    Nah: _taggedUnions.__
+  });
+  describe('constructors', () => {
+    it('should properly construct (Yeah)', () => {
+      const actual = union.Yeah({
+        value: 0
+      });
+      const expected = {
+        type: 'Yeah',
+        value: 0
+      };
+      expect(actual).toEqual(expected);
+    });
+    it('should properly construct (Nah)', () => {
+      const actual = union.Nah();
+      const expected = {
+        type: 'Nah'
+      };
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('fold', () => {
+    const f = union.fold({
+      Yeah: x => x.value + 3,
+      Nah: () => 2
+    });
+    it('should properly fold the union, covering all cases (Yup)', () => {
+      const actual = f(union.Yeah({
+        value: 5
+      }));
+      const expected = 8;
+      expect(actual).toEqual(expected);
+    });
+    it('should properly fold the union, covering all cases (Nah)', () => {
+      const actual = f(union.Nah());
+      const expected = 2;
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('tags', () => {
+    it('should return an array containing the data constructor tags', () => {
+      const actual = union.tags;
+      const expected = ['Yup', 'Nah'];
+      expect(actual).toEqual(expected);
+    });
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/__tests__/typeGuards.jest.d.ts b/dist/sharedHelpers/__tests__/typeGuards.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/typeGuards.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/__tests__/typeGuards.jest.js b/dist/sharedHelpers/__tests__/typeGuards.jest.js
new file mode 100644
index 000000000..57914e217
--- /dev/null
+++ b/dist/sharedHelpers/__tests__/typeGuards.jest.js
@@ -0,0 +1,40 @@
+"use strict";
+
+var _typeGuards = require("../typeGuards");
+
+describe('isFalsy', () => {
+  it('should return false when given a truthy value', () => {
+    const actual = (0, _typeGuards.isFalsy)(1);
+    const expected = false;
+    expect(actual).toBe(expected);
+  });
+  it('should return true when given false', () => {
+    const actual = (0, _typeGuards.isFalsy)(false);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return true when given an empty string', () => {
+    const actual = (0, _typeGuards.isFalsy)('');
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return true when given NaN', () => {
+    const invalidNum = undefined;
+
+    const _NaN = 3 / invalidNum;
+
+    const actual = (0, _typeGuards.isFalsy)(_NaN);
+    const expected = true;
+    expect(actual).toEqual(expected);
+  });
+  it('should return true when given null', () => {
+    const actual = (0, _typeGuards.isFalsy)(null);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return true when given undefined', () => {
+    const actual = (0, _typeGuards.isFalsy)(undefined);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/apiActions.d.ts b/dist/sharedHelpers/apiActions.d.ts
new file mode 100644
index 000000000..4bc7bcc7b
--- /dev/null
+++ b/dist/sharedHelpers/apiActions.d.ts
@@ -0,0 +1,59 @@
+import { Prism } from 'monocle-ts';
+import { Newtype } from 'newtype-ts';
+export interface Optimistic<A extends string> extends Newtype<{
+    readonly Optimistic: unique symbol;
+    phantom: A;
+}, string> {
+}
+export interface Request<A extends string> extends Newtype<{
+    readonly Request: unique symbol;
+    phantom: A;
+}, string> {
+}
+export interface Failure<A extends string> extends Newtype<{
+    readonly Failure: unique symbol;
+    phantom: A;
+}, string> {
+}
+export interface Success<A extends string> extends Newtype<{
+    readonly Success: unique symbol;
+    phantom: A;
+}, string> {
+}
+export declare type ApiActionType<A extends string> = Optimistic<A> | Request<A> | Failure<A> | Success<A>;
+export declare const coerceApiActionTypeToString: <A extends string>(x: ApiActionType<A>) => string;
+export declare type ApiActionTypes<A extends string> = {
+    types: {
+        optimistic: Optimistic<A>;
+        request: Request<A>;
+        failure: Failure<A>;
+        success: Success<A>;
+    };
+    guards: {
+        isOptimistic: (x: ApiActionType<A>) => x is Optimistic<A>;
+        isRequest: (x: ApiActionType<A>) => x is Request<A>;
+        isFailure: (x: ApiActionType<A>) => x is Failure<A>;
+        isSuccess: (x: ApiActionType<A>) => x is Success<A>;
+    };
+    prisms: {
+        optimistic: Prism<string, Optimistic<A>>;
+        request: Prism<string, Request<A>>;
+        failure: Prism<string, Failure<A>>;
+        success: Prism<string, Success<A>>;
+    };
+};
+export declare const mkApiActionTypes: <A extends string>(pathPrefix: A) => ApiActionTypes<A>;
+export declare type GeneratedApiAction<Type, Payload, Meta> = Payload extends undefined ? (Meta extends undefined ? {
+    type: Type;
+} : {
+    type: Type;
+    meta: Meta;
+}) : (Meta extends undefined ? {
+    type: Type;
+    payload: Payload;
+} : {
+    type: Type;
+    payload: Payload;
+    meta: Meta;
+});
+export declare const mkApiAction: <A extends string, Type extends ApiActionType<A>, Payload = undefined, Meta = undefined>(type: Type, payload?: Payload | undefined, meta?: Meta | undefined) => GeneratedApiAction<Type, Payload, Meta>;
diff --git a/dist/CoreUtils/api-actions.js b/dist/sharedHelpers/apiActions.js
similarity index 58%
rename from dist/CoreUtils/api-actions.js
rename to dist/sharedHelpers/apiActions.js
index dc96eac21..80183ebfe 100644
--- a/dist/CoreUtils/api-actions.js
+++ b/dist/sharedHelpers/apiActions.js
@@ -1,11 +1,20 @@
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mkApiAction = exports.mkApiActionTypes = exports.coerceApiActionTypeToString = void 0;
+
 var _newtypeTs = require("newtype-ts");
 
+var _typeGuards = require("./typeGuards");
+
 // this is safe, because we know ApiActionType is a union of newtypes,
 // and we know each of those newtypes is actually a string at runtime
 const coerceApiActionTypeToString = x => (0, _newtypeTs.unsafeCoerce)(x);
 
+exports.coerceApiActionTypeToString = coerceApiActionTypeToString;
+
 const mkApiActionTypes = pathPrefix => {
   const isoOptimistic = (0, _newtypeTs.iso)();
   const isoRequest = (0, _newtypeTs.iso)();
@@ -13,11 +22,11 @@ const mkApiActionTypes = pathPrefix => {
   const isoSuccess = (0, _newtypeTs.iso)();
   const pathOptimistic = `${pathPrefix}_OPTIMISTIC`;
   const optimistic = isoOptimistic.wrap(pathOptimistic);
-  const pathRequest = `${pathPrefix}/_REQUEST`;
+  const pathRequest = `${pathPrefix}_REQUEST`;
   const request = isoRequest.wrap(pathRequest);
-  const pathFailure = `${pathPrefix}/_FAILURE`;
+  const pathFailure = `${pathPrefix}_FAILURE`;
   const failure = isoFailure.wrap(pathFailure);
-  const pathSuccess = `${pathPrefix}/_SUCCESS`;
+  const pathSuccess = `${pathPrefix}_SUCCESS`;
   const success = isoSuccess.wrap(pathSuccess);
 
   const isOptimistic = x => coerceApiActionTypeToString(x) === pathOptimistic;
@@ -62,14 +71,14 @@ const mkApiActionTypes = pathPrefix => {
   };
 };
 
-const isUndefined = x => x === undefined;
+exports.mkApiActionTypes = mkApiActionTypes;
 
-const mkApiAction = (type, payload, meta) => isUndefined(payload) ? isUndefined(meta) ? {
+const mkApiAction = (type, payload, meta) => (0, _typeGuards.isUndefined)(payload) ? (0, _typeGuards.isUndefined)(meta) ? {
   type
 } : {
   type,
   meta
-} : isUndefined(meta) ? {
+} : (0, _typeGuards.isUndefined)(meta) ? {
   type,
   payload
 } : {
@@ -78,20 +87,4 @@ const mkApiAction = (type, payload, meta) => isUndefined(payload) ? isUndefined(
   meta
 };
 
-const test = mkApiActionTypes('a/path/in/my/app/SOME_API_ACTION'); // => { type: Failure<"a/path/in/my/app/SOME_API_ACTION">; payload: Error; meta: string }
-
-const testActionA = mkApiAction(test.types.failure, new Error('Oops!'), Date.now().toLocaleString()); // => true
-
-const testGuardA = test.guards.isFailure(testActionA.type); // type error -- the arg given to isFailure is a string, but it needs to be an
-// ApiActionType<"a/path/in/my/app/SOME_API_ACTION">
-// const testGuardB = test.guards.isFailure('a/path/in/my/app/SOME_API_ACTION_FAILURE')
-// => { type: Request<"a/path/in/my/app/SOME_API_ACTION"> }
-
-const testActionB = mkApiAction(test.types.request); // => { type: Optimistic<"a/path/in/my/app/SOME_API_ACTION">; payload: { data: string } }
-
-const testActionC = mkApiAction(test.types.success, {
-  data: 'Some received data'
-}); // => Option<Request<"a/path/in/my/app/SOME_API_ACTION">>
-// (it's a Some<Request<"a/path/in/my/app/SOME_API_ACTION">> in this case)
-
-const requestOption = test.prisms.request.getOption('a/path/in/my/app/SOME_API_ACTION_REQUEST');
\ No newline at end of file
+exports.mkApiAction = mkApiAction;
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/Apply.d.ts b/dist/sharedHelpers/fp-ts-ext/Apply.d.ts
new file mode 100644
index 000000000..86071c124
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Apply.d.ts
@@ -0,0 +1,40 @@
+/**
+ * sequence utility for a tuple containing Options of mixed value types
+ */
+export declare const sequenceOptionsTuple: <T extends import("fp-ts/lib/Option").Option<any>[]>(...t: T & {
+    0: import("fp-ts/lib/Option").Option<any>;
+}) => import("fp-ts/lib/Option").Option<{ [K in keyof T]: T[K] extends import("fp-ts/lib/Option").Option<infer A> ? A : never; }>;
+/**
+ * sequence utility for a tuple containing Eithers of mixed value types
+ */
+export declare const sequenceEithersTuple: <L, T extends import("fp-ts/lib/Either").Either<L, any>[]>(...t: T & {
+    0: import("fp-ts/lib/Either").Either<L, any>;
+}) => import("fp-ts/lib/Either").Either<L, { [K in keyof T]: T[K] extends import("fp-ts/lib/Either").Either<L, infer A> ? A : never; }>;
+/**
+ * sequence utility for a tuple containing Tasks of mixed value types
+ */
+export declare const sequenceTasksTuple: <T extends import("fp-ts/lib/Task").Task<any>[]>(...t: T & {
+    0: import("fp-ts/lib/Task").Task<any>;
+}) => import("fp-ts/lib/Task").Task<{ [K in keyof T]: T[K] extends import("fp-ts/lib/Task").Task<infer A> ? A : never; }>;
+/**
+ * sequence utility for a tuple containing TaskEithers of mixed value types
+ */
+export declare const sequenceTaskEithersTuple: <L, T extends import("fp-ts/lib/TaskEither").TaskEither<L, any>[]>(...t: T & {
+    0: import("fp-ts/lib/TaskEither").TaskEither<L, any>;
+}) => import("fp-ts/lib/TaskEither").TaskEither<L, { [K in keyof T]: T[K] extends import("fp-ts/lib/TaskEither").TaskEither<L, infer A> ? A : never; }>;
+/**
+ * sequence utility for structs (interfaces/objects) containing Options of mixed value types
+ */
+export declare const sequenceOptionsStruct: <R extends Record<string, import("fp-ts/lib/Option").Option<any>>>(r: keyof R extends never ? never : R) => import("fp-ts/lib/Option").Option<{ [K in keyof R]: R[K] extends import("fp-ts/lib/Option").Option<infer A> ? A : never; }>;
+/**
+ * sequence utility for structs (interfaces/objects) containing Eithers of mixed value types
+ */
+export declare const sequenceEithersStruct: <L, R extends Record<string, import("fp-ts/lib/Either").Either<L, any>>>(r: (keyof R extends never ? never : R) & Record<string, import("fp-ts/lib/Either").Either<L, any>>) => import("fp-ts/lib/Either").Either<L, { [K in keyof R]: R[K] extends import("fp-ts/lib/Either").Either<any, infer A> ? A : never; }>;
+/**
+ * sequence utility for structs (interfaces/objects) containing Tasks of mixed value types
+ */
+export declare const sequenceTasksStruct: <R extends Record<string, import("fp-ts/lib/Task").Task<any>>>(r: keyof R extends never ? never : R) => import("fp-ts/lib/Task").Task<{ [K in keyof R]: R[K] extends import("fp-ts/lib/Task").Task<infer A> ? A : never; }>;
+/**
+ * sequence utility for structs (interfaces/objects) containing TaskEithers of mixed value types
+ */
+export declare const sequenceTaskEithersStruct: <L, R extends Record<string, import("fp-ts/lib/TaskEither").TaskEither<L, any>>>(r: (keyof R extends never ? never : R) & Record<string, import("fp-ts/lib/TaskEither").TaskEither<L, any>>) => import("fp-ts/lib/TaskEither").TaskEither<L, { [K in keyof R]: R[K] extends import("fp-ts/lib/TaskEither").TaskEither<any, infer A> ? A : never; }>;
diff --git a/dist/sharedHelpers/fp-ts-ext/Apply.js b/dist/sharedHelpers/fp-ts-ext/Apply.js
new file mode 100644
index 000000000..0d11ba9b1
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Apply.js
@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sequenceTaskEithersStruct = exports.sequenceTasksStruct = exports.sequenceEithersStruct = exports.sequenceOptionsStruct = exports.sequenceTaskEithersTuple = exports.sequenceTasksTuple = exports.sequenceEithersTuple = exports.sequenceOptionsTuple = void 0;
+
+var _Apply = require("fp-ts/lib/Apply");
+
+var _Either = require("fp-ts/lib/Either");
+
+var _Option = require("fp-ts/lib/Option");
+
+var _Task = require("fp-ts/lib/Task");
+
+var _TaskEither = require("fp-ts/lib/TaskEither");
+
+/**
+ * sequence utility for a tuple containing Options of mixed value types
+ */
+const sequenceOptionsTuple = (0, _Apply.sequenceT)(_Option.option);
+/**
+ * sequence utility for a tuple containing Eithers of mixed value types
+ */
+
+exports.sequenceOptionsTuple = sequenceOptionsTuple;
+const sequenceEithersTuple = (0, _Apply.sequenceT)(_Either.either);
+/**
+ * sequence utility for a tuple containing Tasks of mixed value types
+ */
+
+exports.sequenceEithersTuple = sequenceEithersTuple;
+const sequenceTasksTuple = (0, _Apply.sequenceT)(_Task.task);
+/**
+ * sequence utility for a tuple containing TaskEithers of mixed value types
+ */
+
+exports.sequenceTasksTuple = sequenceTasksTuple;
+const sequenceTaskEithersTuple = (0, _Apply.sequenceT)(_TaskEither.taskEither);
+/**
+ * sequence utility for structs (interfaces/objects) containing Options of mixed value types
+ */
+
+exports.sequenceTaskEithersTuple = sequenceTaskEithersTuple;
+const sequenceOptionsStruct = (0, _Apply.sequenceS)(_Option.option);
+/**
+ * sequence utility for structs (interfaces/objects) containing Eithers of mixed value types
+ */
+
+exports.sequenceOptionsStruct = sequenceOptionsStruct;
+const sequenceEithersStruct = (0, _Apply.sequenceS)(_Either.either);
+/**
+ * sequence utility for structs (interfaces/objects) containing Tasks of mixed value types
+ */
+
+exports.sequenceEithersStruct = sequenceEithersStruct;
+const sequenceTasksStruct = (0, _Apply.sequenceS)(_Task.task);
+/**
+ * sequence utility for structs (interfaces/objects) containing TaskEithers of mixed value types
+ */
+
+exports.sequenceTasksStruct = sequenceTasksStruct;
+const sequenceTaskEithersStruct = (0, _Apply.sequenceS)(_TaskEither.taskEither);
+exports.sequenceTaskEithersStruct = sequenceTaskEithersStruct;
\ No newline at end of file
diff --git a/dist/CoreUtils/Array.d.ts b/dist/sharedHelpers/fp-ts-ext/Array.d.ts
similarity index 94%
rename from dist/CoreUtils/Array.d.ts
rename to dist/sharedHelpers/fp-ts-ext/Array.d.ts
index fe9594e00..a2fba1101 100644
--- a/dist/CoreUtils/Array.d.ts
+++ b/dist/sharedHelpers/fp-ts-ext/Array.d.ts
@@ -30,14 +30,6 @@ export declare const runIOs: <A>(xs: IO<A>[]) => void;
  * Tests whether or not something is a member of an array via strict equality
  */
 export declare const contains: <A>(x: A) => (xs: A[]) => boolean;
-/**
- * Combines two lists into a set (i.e. no duplicates)
- * composed of the elements of each list. Uses strict equality for comparisons
- *
- * NOTE: You should probably convert to a Set and use `union` from the
- * 'fp-ts/lib/Set' module instead
- */
-export declare const union: <A>(xs: A[], ys: A[]) => A[];
 /**
  * Gets the length of an ArrayLike or string
  */
diff --git a/dist/CoreUtils/Array.js b/dist/sharedHelpers/fp-ts-ext/Array.js
similarity index 90%
rename from dist/CoreUtils/Array.js
rename to dist/sharedHelpers/fp-ts-ext/Array.js
index a3f5efc12..21ed80d0e 100644
--- a/dist/CoreUtils/Array.js
+++ b/dist/sharedHelpers/fp-ts-ext/Array.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.notAny = exports.all = exports.any = exports.intersperseMapWithIndex = exports.intersperseMap = exports.intersperse = exports.liftOption2 = exports.sortByNumeric = exports.sortByAlpha = exports.leftsAndRights = exports.traverseTaskEithers = exports.traverseTasks = exports.traverseEithers = exports.traverseOptions = exports.sequenceTaskEithers = exports.sequenceTasks = exports.sequenceEithers = exports.sequenceOptions = exports.len = exports.union = exports.contains = exports.runIOs = exports.forEachWithIndex = exports.forEach = exports.concatFlipped = exports.concat = exports.map = void 0;
+exports.notAny = exports.all = exports.any = exports.intersperseMapWithIndex = exports.intersperseMap = exports.intersperse = exports.liftOption2 = exports.sortByNumeric = exports.sortByAlpha = exports.leftsAndRights = exports.traverseTaskEithers = exports.traverseTasks = exports.traverseEithers = exports.traverseOptions = exports.sequenceTaskEithers = exports.sequenceTasks = exports.sequenceEithers = exports.sequenceOptions = exports.len = exports.contains = exports.runIOs = exports.forEachWithIndex = exports.forEach = exports.concatFlipped = exports.concat = exports.map = void 0;
 
 var _Apply = require("fp-ts/lib/Apply");
 
@@ -25,9 +25,7 @@ var _TaskEither = require("fp-ts/lib/TaskEither");
 
 var _IO = require("./IO");
 
-var _Number = require("./Number");
-
-var _String = require("./String");
+var _Ord = require("./Ord");
 
 var _Option2 = require("./Option");
 
@@ -83,25 +81,13 @@ const runIOs = xs => forEach(xs, _IO.runIO);
 
 exports.runIOs = runIOs;
 
-const contains = x => xs => (0, _Array.member)(_Setoid.setoidStrict)(xs, x);
-/**
- * Combines two lists into a set (i.e. no duplicates)
- * composed of the elements of each list. Uses strict equality for comparisons
- *
- * NOTE: You should probably convert to a Set and use `union` from the
- * 'fp-ts/lib/Set' module instead
- */
-
-
-exports.contains = contains;
-
-const union = (xs, ys) => (0, _Array.uniq)(_Setoid.setoidStrict)(_Array.array.alt(xs, ys));
+const contains = x => xs => (0, _Array.elem)(_Setoid.setoidStrict)(x, xs);
 /**
  * Gets the length of an ArrayLike or string
  */
 
 
-exports.union = union;
+exports.contains = contains;
 
 const len = xs => xs.length;
 /**
@@ -209,13 +195,13 @@ const leftsAndRights = xs => {
 
 
 exports.leftsAndRights = leftsAndRights;
-const sortByAlpha = (0, _Array.sort)(_String.ordAlpha);
+const sortByAlpha = (0, _Array.sort)(_Ord.ordAlpha);
 /**
  * Sorts an array of strings numerically
  */
 
 exports.sortByAlpha = sortByAlpha;
-const sortByNumeric = (0, _Array.sort)(_Number.ordNumeric);
+const sortByNumeric = (0, _Array.sort)(_Ord.ordNumeric);
 /**
  * Lift a function of two arguments to a function which accepts and returns
  * those same values in the context of Options
diff --git a/dist/sharedHelpers/fp-ts-ext/Either.d.ts b/dist/sharedHelpers/fp-ts-ext/Either.d.ts
new file mode 100644
index 000000000..4bca88e9b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Either.d.ts
@@ -0,0 +1,5 @@
+import { Either } from 'fp-ts/lib/Either';
+/**
+ * Standalone version of fp-ts' `fold` for Eithers
+ */
+export declare const fold: <B, L, A>(x: Either<L, A>, onLeft: (l: L) => B, onRight: (a: A) => B) => B;
diff --git a/dist/CoreUtils/Either.js b/dist/sharedHelpers/fp-ts-ext/Either.js
similarity index 72%
rename from dist/CoreUtils/Either.js
rename to dist/sharedHelpers/fp-ts-ext/Either.js
index 75bd30f5f..4e45fcdeb 100644
--- a/dist/CoreUtils/Either.js
+++ b/dist/sharedHelpers/fp-ts-ext/Either.js
@@ -8,6 +8,6 @@ exports.fold = void 0;
 /**
  * Standalone version of fp-ts' `fold` for Eithers
  */
-const fold = (x, whenLeft, whenRight) => x.fold(whenLeft, whenRight);
+const fold = (x, onLeft, onRight) => x.fold(onLeft, onRight);
 
 exports.fold = fold;
\ No newline at end of file
diff --git a/dist/CoreUtils/IO.d.ts b/dist/sharedHelpers/fp-ts-ext/IO.d.ts
similarity index 86%
rename from dist/CoreUtils/IO.d.ts
rename to dist/sharedHelpers/fp-ts-ext/IO.d.ts
index 675ea8997..43c1f1b1c 100644
--- a/dist/CoreUtils/IO.d.ts
+++ b/dist/sharedHelpers/fp-ts-ext/IO.d.ts
@@ -12,7 +12,7 @@ export declare const constRunIO: <A>(x: IO<A>) => Lazy<A>;
  * IO constructor function
  *
  */
-export declare const mkIO: <A>(f: Lazy<A>) => IO<A>;
+export declare const newIO: <A>(f: Lazy<A>) => IO<A>;
 /**
  * noOp IO function
  */
diff --git a/dist/CoreUtils/IO.js b/dist/sharedHelpers/fp-ts-ext/IO.js
similarity index 64%
rename from dist/CoreUtils/IO.js
rename to dist/sharedHelpers/fp-ts-ext/IO.js
index 747c299bb..5f04aab72 100644
--- a/dist/CoreUtils/IO.js
+++ b/dist/sharedHelpers/fp-ts-ext/IO.js
@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.noOpIO = exports.mkIO = exports.constRunIO = exports.runIO = void 0;
+exports.noOpIO = exports.newIO = exports.constRunIO = exports.runIO = void 0;
 
 var _IO = require("fp-ts/lib/IO");
 
-var _general = require("./general");
+var _function = require("./function");
 
 /**
  * Run IO
@@ -29,12 +29,12 @@ const constRunIO = x => x.run;
 
 exports.constRunIO = constRunIO;
 
-const mkIO = f => new _IO.IO(f);
+const newIO = f => new _IO.IO(f);
 /**
  * noOp IO function
  */
 
 
-exports.mkIO = mkIO;
-const noOpIO = new _IO.IO(_general.constVoid);
+exports.newIO = newIO;
+const noOpIO = new _IO.IO(_function.constVoid);
 exports.noOpIO = noOpIO;
\ No newline at end of file
diff --git a/dist/CoreUtils/Option.d.ts b/dist/sharedHelpers/fp-ts-ext/Option.d.ts
similarity index 84%
rename from dist/CoreUtils/Option.d.ts
rename to dist/sharedHelpers/fp-ts-ext/Option.d.ts
index 26fd05f52..fb24a7097 100644
--- a/dist/CoreUtils/Option.d.ts
+++ b/dist/sharedHelpers/fp-ts-ext/Option.d.ts
@@ -1,5 +1,4 @@
 import { Option } from 'fp-ts/lib/Option';
-import { Prism } from 'monocle-ts';
 import { ReactNode } from 'react';
 /**
  * type guard for Option
@@ -9,7 +8,7 @@ export declare const isOption: <A>(x: any) => x is Option<A>;
  * Standalone version of fp-ts' `fold` for Options. Like `getOrElse`,
  * but with a mapping transformation for the value in a `Some`
  */
-export declare const fold: <A, B>(a: Option<A>, b: B, whenSome: (a: A) => B) => B;
+export declare const fold: <A, B>(a: Option<A>, onNone: B, onSome: (a: A) => B) => B;
 /**
  * A specialized (partially applied with a null default) version of Option's
  * `fold` method that returns null when given a `None` or a `ReactNode` when
@@ -26,7 +25,7 @@ export declare const getOrElse: <A>(a: A) => (b: Option<A>) => A;
  * Partially applied version of `getOrElse` providing an empty array
  * as the default argument
  */
-export declare const getOrEmptyArray: <A extends []>(opt: Option<A>) => A;
+export declare const getOrEmptyArray: <A>(opt: Option<A[]>) => A[];
 /**
  * Partially applied version of `getOrElse` providing an empty string
  * as the default argument
@@ -47,10 +46,6 @@ export declare const fromTruthyFalsy: <A>(x: A) => Option<A>;
  * Converts a None into false, and a Some<T> into a boolean
  */
 export declare const toBoolean: <A>(x: Option<A>) => boolean;
-/**
- * Prism constructor function
- */
-export declare const prism: <S, A>(reverseGet: (b: A) => S) => (getOption: (s: S) => Option<A>) => Prism<S, A>;
 /**
  * Folds an option down into either an empty array or a single-element array containing
  * the value from within the Some. Useful in conjunction with the spread operator.
diff --git a/dist/CoreUtils/Option.js b/dist/sharedHelpers/fp-ts-ext/Option.js
similarity index 73%
rename from dist/CoreUtils/Option.js
rename to dist/sharedHelpers/fp-ts-ext/Option.js
index 717c8345f..2771a57ea 100644
--- a/dist/CoreUtils/Option.js
+++ b/dist/sharedHelpers/fp-ts-ext/Option.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toSpreadable = exports.prism = exports.toBoolean = exports.fromTruthyFalsy = exports.getOrZero = exports.getOrEmptyString = exports.getOrEmptyArray = exports.getOrElse = exports.renderOnSome = exports.fold = exports.isOption = void 0;
+exports.toSpreadable = exports.toBoolean = exports.fromTruthyFalsy = exports.getOrZero = exports.getOrEmptyString = exports.getOrEmptyArray = exports.getOrElse = exports.renderOnSome = exports.fold = exports.isOption = void 0;
 
 var _Foldable2v = require("fp-ts/lib/Foldable2v");
 
@@ -11,17 +11,13 @@ var _function = require("fp-ts/lib/function");
 
 var _Option = require("fp-ts/lib/Option");
 
-var _monocleTs = require("monocle-ts");
-
-var _primitiveGuards = require("./primitive-guards");
-
-var _general = require("./general");
+var _typeGuards = require("../typeGuards");
 
 /**
  * type guard for Option
  */
 // tslint:disable-next-line:no-any
-const isOption = x => !(0, _primitiveGuards.isNil)(x) && !(0, _primitiveGuards.isNil)(x.isSome) && !(0, _primitiveGuards.isNil)(x.isNone);
+const isOption = x => !(0, _typeGuards.isNil)(x) && !(0, _typeGuards.isNil)(x.isSome) && !(0, _typeGuards.isNil)(x.isNone) && (!(0, _typeGuards.isNil)(x._tag) && x._tag === 'Some' || x._tag === 'None');
 /**
  * Standalone version of fp-ts' `fold` for Options. Like `getOrElse`,
  * but with a mapping transformation for the value in a `Some`
@@ -30,7 +26,7 @@ const isOption = x => !(0, _primitiveGuards.isNil)(x) && !(0, _primitiveGuards.i
 
 exports.isOption = isOption;
 
-const fold = (a, b, whenSome) => a.fold(b, whenSome);
+const fold = (a, onNone, onSome) => a.fold(onNone, onSome);
 /**
  * A specialized (partially applied with a null default) version of Option's
  * `fold` method that returns null when given a `None` or a `ReactNode` when
@@ -83,7 +79,7 @@ const getOrZero = getOrElse(0);
 
 exports.getOrZero = getOrZero;
 
-const fromTruthyFalsy = x => (0, _general.isFalsy)(x) ? _Option.none : (0, _Option.some)(x);
+const fromTruthyFalsy = x => (0, _typeGuards.isFalsy)(x) ? _Option.none : (0, _Option.some)(x);
 /**
  * Converts a None into false, and a Some<T> into a boolean
  */
@@ -92,20 +88,12 @@ const fromTruthyFalsy = x => (0, _general.isFalsy)(x) ? _Option.none : (0, _Opti
 exports.fromTruthyFalsy = fromTruthyFalsy;
 
 const toBoolean = x => fold(x, false, _function.constTrue);
-/**
- * Prism constructor function
- */
-
-
-exports.toBoolean = toBoolean;
-
-const prism = reverseGet => getOption => new _monocleTs.Prism(getOption, reverseGet);
 /**
  * Folds an option down into either an empty array or a single-element array containing
  * the value from within the Some. Useful in conjunction with the spread operator.
  */
 
 
-exports.prism = prism;
+exports.toBoolean = toBoolean;
 const toSpreadable = (0, _Foldable2v.toArray)(_Option.option);
 exports.toSpreadable = toSpreadable;
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/Ord.d.ts b/dist/sharedHelpers/fp-ts-ext/Ord.d.ts
new file mode 100644
index 000000000..dfa53be6f
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Ord.d.ts
@@ -0,0 +1,32 @@
+import { Ord } from 'fp-ts/lib/Ord';
+import { Ordering } from 'fp-ts/lib/Ordering';
+/**
+ * Determines ordering of two numbers (numeric comparison)
+ */
+export declare const numericCompare: (x: number, y: number) => Ordering;
+/**
+ * Ord instance for number
+ */
+export declare const ordNumeric: Ord<number>;
+/**
+ * Determines ordering of two strings (alphabetic comparison)
+ */
+export declare const alphaCompare: (x: string, y: string) => Ordering;
+/**
+ * Ord instance for string
+ */
+export declare const ordAlpha: Ord<string>;
+/**
+ * Comparator for RecordWithName, comparing lowercase names alphabetically
+ */
+export declare const recordWithNameLowerComparator: <A extends {
+    name: string;
+}>(a: A, b: A) => Ordering;
+/**
+ * Ord instance for types extending the RecordWithName interface
+ * that does comparisons & equality checking against the name prop
+ * converted to lowercase
+ */
+export declare const ordRecordWithNameLower: Ord<{
+    name: string;
+}>;
diff --git a/dist/sharedHelpers/fp-ts-ext/Ord.js b/dist/sharedHelpers/fp-ts-ext/Ord.js
new file mode 100644
index 000000000..673844261
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Ord.js
@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ordRecordWithNameLower = exports.recordWithNameLowerComparator = exports.ordAlpha = exports.alphaCompare = exports.ordNumeric = exports.numericCompare = void 0;
+
+var _Setoid = require("./Setoid");
+
+var _strings = require("../strings");
+
+/**
+ * Determines ordering of two numbers (numeric comparison)
+ */
+const numericCompare = (x, y) => x < y ? -1 : x > y ? 1 : 0;
+/**
+ * Ord instance for number
+ */
+
+
+exports.numericCompare = numericCompare;
+const ordNumeric = { ..._Setoid.setoidStrict,
+  compare: numericCompare
+  /**
+   * Determines ordering of two strings (alphabetic comparison)
+   */
+
+};
+exports.ordNumeric = ordNumeric;
+
+const alphaCompare = (x, y) => x < y ? -1 : x > y ? 1 : 0;
+/**
+ * Ord instance for string
+ */
+
+
+exports.alphaCompare = alphaCompare;
+const ordAlpha = { ..._Setoid.setoidStrict,
+  compare: alphaCompare
+  /**
+   * Comparator for RecordWithName, comparing lowercase names alphabetically
+   */
+
+};
+exports.ordAlpha = ordAlpha;
+
+const recordWithNameLowerComparator = (a, b) => {
+  const nameA = (0, _strings.toLower)(a.name);
+  const nameB = (0, _strings.toLower)(b.name);
+  return nameA < nameB ? -1 : nameA > nameB ? 1 : 0;
+};
+/**
+ * Ord instance for types extending the RecordWithName interface
+ * that does comparisons & equality checking against the name prop
+ * converted to lowercase
+ */
+
+
+exports.recordWithNameLowerComparator = recordWithNameLowerComparator;
+const ordRecordWithNameLower = { ..._Setoid.setoidRecordWithNameLower,
+  compare: recordWithNameLowerComparator
+};
+exports.ordRecordWithNameLower = ordRecordWithNameLower;
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/Record.d.ts b/dist/sharedHelpers/fp-ts-ext/Record.d.ts
new file mode 100644
index 000000000..0386493bc
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Record.d.ts
@@ -0,0 +1,22 @@
+import { Ord } from 'fp-ts/lib/Ord';
+/**
+ * Retrieves the keys of an object while retaining keyof type information
+ */
+export declare const keys: <A extends Record<string, unknown>, K extends keyof A>(x: A) => K[];
+/**
+ * Retrieves the value of a given property key from an object (curried)
+ */
+export declare const prop: <A extends Record<string, unknown>, K extends keyof A>(k: K) => (obj: A) => A[K];
+/**
+ * Omits the key-value pairs from an object associated with the provided keys
+ */
+export declare const omit: <A extends Record<string, unknown>, K extends keyof A>(rec: A, ks: K[]) => { [P in Exclude<keyof A, K>]: A[P]; };
+/**
+ * Picks the key-value pairs from an object associated with the provided keys
+ */
+export declare const pick: <A extends Record<string, unknown>, K extends keyof A>(rec: A, ks: K[]) => { [P in K]: A[P]; };
+export declare const sortRecords: <S extends Record<K, A>, K extends keyof S & string, A extends S[K]>(ord: Ord<S>) => <T extends S>(data: T[]) => T[];
+/**
+ * Type guard for `Record<PropertyKey, T>` from `object`
+ */
+export declare const isRecord: <T = unknown>(x: unknown) => x is Record<string | number | symbol, T>;
diff --git a/dist/sharedHelpers/fp-ts-ext/Record.js b/dist/sharedHelpers/fp-ts-ext/Record.js
new file mode 100644
index 000000000..52a3d1fac
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Record.js
@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isRecord = exports.sortRecords = exports.pick = exports.omit = exports.prop = exports.keys = void 0;
+
+var _Array = require("fp-ts/lib/Array");
+
+var _Array2 = require("./Array");
+
+var _typeGuards = require("../typeGuards");
+
+/**
+ * Retrieves the keys of an object while retaining keyof type information
+ */
+const keys = x => Object.keys(x);
+/**
+ * Retrieves the value of a given property key from an object (curried)
+ */
+
+
+exports.keys = keys;
+
+const prop = k => obj => obj[k];
+/**
+ * Omits the key-value pairs from an object associated with the provided keys
+ */
+
+
+exports.prop = prop;
+
+const omit = (rec, ks) => {
+  const { ...result
+  } = rec;
+  (0, _Array2.forEach)(ks, k => delete result[k]);
+  return result;
+};
+/**
+ * Picks the key-value pairs from an object associated with the provided keys
+ */
+
+
+exports.omit = omit;
+
+const pick = (rec, ks) => {
+  const result = {};
+  (0, _Array2.forEach)(ks, k => {
+    result[k] = rec[k];
+  });
+  return result;
+};
+
+exports.pick = pick;
+
+const sortRecords = ord => data => (0, _Array.sort)(ord)(data);
+/**
+ * Type guard for `Record<PropertyKey, T>` from `object`
+ */
+
+
+exports.sortRecords = sortRecords;
+
+const isRecord = x => (0, _typeGuards.isObject)(x);
+
+exports.isRecord = isRecord;
\ No newline at end of file
diff --git a/dist/CoreUtils/Setoid.d.ts b/dist/sharedHelpers/fp-ts-ext/Setoid.d.ts
similarity index 59%
rename from dist/CoreUtils/Setoid.d.ts
rename to dist/sharedHelpers/fp-ts-ext/Setoid.d.ts
index 3e9b29870..5ec351b62 100644
--- a/dist/CoreUtils/Setoid.d.ts
+++ b/dist/sharedHelpers/fp-ts-ext/Setoid.d.ts
@@ -7,6 +7,8 @@ export declare const setoidStrict: {
 };
 /**
  * Function that returns a generic setoid that uses strict equality checking
+ *
+ * NOTE: This only exists in case you need to explicitly provide a generic
  */
 export declare const getSetoidStrict: <A>() => Setoid<A>;
 /**
@@ -17,5 +19,19 @@ export declare const setoidShallowEq: {
 };
 /**
  * Function that returns a generic setoid that uses shallow equality checking
+ *
+ * NOTE: This only exists in case you need to explicitly provide a generic
  */
 export declare const getSetoidShallowEq: <A extends object>() => Setoid<A>;
+/**
+ * Equality checker for RecordWithName, comparing lowercase names
+ */
+export declare const recordWithNameLowerEquality: <A extends {
+    name: string;
+}>(a: A, b: A) => boolean;
+/**
+ * Setoid for RecordWithName using recordWithNameLowerEquality
+ */
+export declare const setoidRecordWithNameLower: Setoid<{
+    name: string;
+}>;
diff --git a/dist/sharedHelpers/fp-ts-ext/Setoid.js b/dist/sharedHelpers/fp-ts-ext/Setoid.js
new file mode 100644
index 000000000..8749580e3
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/Setoid.js
@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setoidRecordWithNameLower = exports.recordWithNameLowerEquality = exports.getSetoidShallowEq = exports.setoidShallowEq = exports.getSetoidStrict = exports.setoidStrict = void 0;
+
+var _Setoid = require("fp-ts/lib/Setoid");
+
+var _shallowEqual = require("../shallowEqual");
+
+var _strings = require("../strings");
+
+/**
+ * Generic setoid that uses strict equality checking
+ */
+const setoidStrict = {
+  equals: _Setoid.strictEqual
+  /**
+   * Function that returns a generic setoid that uses strict equality checking
+   *
+   * NOTE: This only exists in case you need to explicitly provide a generic
+   */
+
+};
+exports.setoidStrict = setoidStrict;
+
+const getSetoidStrict = () => setoidStrict;
+/**
+ * Generic setoid that uses shallow equality checking
+ */
+
+
+exports.getSetoidStrict = getSetoidStrict;
+const setoidShallowEq = {
+  equals: _shallowEqual.shallowEqual
+  /**
+   * Function that returns a generic setoid that uses shallow equality checking
+   *
+   * NOTE: This only exists in case you need to explicitly provide a generic
+   */
+
+};
+exports.setoidShallowEq = setoidShallowEq;
+
+const getSetoidShallowEq = () => setoidShallowEq;
+/**
+ * Equality checker for RecordWithName, comparing lowercase names
+ */
+
+
+exports.getSetoidShallowEq = getSetoidShallowEq;
+
+const recordWithNameLowerEquality = (a, b) => (0, _strings.toLower)(a.name) === (0, _strings.toLower)(b.name);
+/**
+ * Setoid for RecordWithName using recordWithNameLowerEquality
+ */
+
+
+exports.recordWithNameLowerEquality = recordWithNameLowerEquality;
+const setoidRecordWithNameLower = {
+  equals: recordWithNameLowerEquality
+};
+exports.setoidRecordWithNameLower = setoidRecordWithNameLower;
\ No newline at end of file
diff --git a/dist/CoreUtils/StrMap.d.ts b/dist/sharedHelpers/fp-ts-ext/StrMap.d.ts
similarity index 72%
rename from dist/CoreUtils/StrMap.d.ts
rename to dist/sharedHelpers/fp-ts-ext/StrMap.d.ts
index f4b769675..a4e9f8001 100644
--- a/dist/CoreUtils/StrMap.d.ts
+++ b/dist/sharedHelpers/fp-ts-ext/StrMap.d.ts
@@ -3,6 +3,6 @@ import { StrMap } from 'fp-ts/lib/StrMap';
  * StrMap constructor function
  *
  */
-export declare const mkStrMap: <A>(object: {
+export declare const newStrMap: <A>(object: {
     [key: string]: A;
 }) => StrMap<A>;
diff --git a/dist/CoreUtils/StrMap.js b/dist/sharedHelpers/fp-ts-ext/StrMap.js
similarity index 59%
rename from dist/CoreUtils/StrMap.js
rename to dist/sharedHelpers/fp-ts-ext/StrMap.js
index 1c766e7f8..48cea0147 100644
--- a/dist/CoreUtils/StrMap.js
+++ b/dist/sharedHelpers/fp-ts-ext/StrMap.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mkStrMap = void 0;
+exports.newStrMap = void 0;
 
 var _StrMap = require("fp-ts/lib/StrMap");
 
@@ -11,6 +11,6 @@ var _StrMap = require("fp-ts/lib/StrMap");
  * StrMap constructor function
  *
  */
-const mkStrMap = object => new _StrMap.StrMap(object);
+const newStrMap = object => new _StrMap.StrMap(object);
 
-exports.mkStrMap = mkStrMap;
\ No newline at end of file
+exports.newStrMap = newStrMap;
\ No newline at end of file
diff --git a/dist/CoreUtils/Task.d.ts b/dist/sharedHelpers/fp-ts-ext/Task.d.ts
similarity index 83%
rename from dist/CoreUtils/Task.d.ts
rename to dist/sharedHelpers/fp-ts-ext/Task.d.ts
index 02663ddec..053bb28a8 100644
--- a/dist/CoreUtils/Task.d.ts
+++ b/dist/sharedHelpers/fp-ts-ext/Task.d.ts
@@ -4,7 +4,7 @@ import { Lazy } from 'fp-ts/lib/function';
  * Task constructor function
  *
  */
-export declare const mkTask: <A>(f: () => Promise<A>) => Task<A>;
+export declare const newTask: <A>(f: () => Promise<A>) => Task<A>;
 /**
  * Run a Task (a lazy Promise)
  */
diff --git a/dist/CoreUtils/Task.js b/dist/sharedHelpers/fp-ts-ext/Task.js
similarity index 74%
rename from dist/CoreUtils/Task.js
rename to dist/sharedHelpers/fp-ts-ext/Task.js
index 8345fa175..a60545126 100644
--- a/dist/CoreUtils/Task.js
+++ b/dist/sharedHelpers/fp-ts-ext/Task.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.constRunTask = exports.runTask = exports.mkTask = void 0;
+exports.constRunTask = exports.runTask = exports.newTask = void 0;
 
 var _Task = require("fp-ts/lib/Task");
 
@@ -11,13 +11,13 @@ var _Task = require("fp-ts/lib/Task");
  * Task constructor function
  *
  */
-const mkTask = f => new _Task.Task(f);
+const newTask = f => new _Task.Task(f);
 /**
  * Run a Task (a lazy Promise)
  */
 
 
-exports.mkTask = mkTask;
+exports.newTask = newTask;
 
 const runTask = x => x.run();
 /**
diff --git a/dist/CoreUtils/TaskEither.d.ts b/dist/sharedHelpers/fp-ts-ext/TaskEither.d.ts
similarity index 84%
rename from dist/CoreUtils/TaskEither.d.ts
rename to dist/sharedHelpers/fp-ts-ext/TaskEither.d.ts
index 5eab78951..66ffb7f01 100644
--- a/dist/CoreUtils/TaskEither.d.ts
+++ b/dist/sharedHelpers/fp-ts-ext/TaskEither.d.ts
@@ -6,7 +6,7 @@ import { Lazy } from 'fp-ts/lib/function';
  * TaskEither constructor function
  *
  */
-export declare const mkTaskEither: <L, A>(task: Task<Either<L, A>>) => TaskEither<L, A>;
+export declare const newTaskEither: <L, A>(task: Task<Either<L, A>>) => TaskEither<L, A>;
 /**
  * Run a TaskEither
  */
diff --git a/dist/CoreUtils/TaskEither.js b/dist/sharedHelpers/fp-ts-ext/TaskEither.js
similarity index 62%
rename from dist/CoreUtils/TaskEither.js
rename to dist/sharedHelpers/fp-ts-ext/TaskEither.js
index 56118558a..48ed136ae 100644
--- a/dist/CoreUtils/TaskEither.js
+++ b/dist/sharedHelpers/fp-ts-ext/TaskEither.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.constRunTaskEither = exports.runTaskEither = exports.mkTaskEither = void 0;
+exports.constRunTaskEither = exports.runTaskEither = exports.newTaskEither = void 0;
 
 var _TaskEither = require("fp-ts/lib/TaskEither");
 
@@ -11,13 +11,13 @@ var _TaskEither = require("fp-ts/lib/TaskEither");
  * TaskEither constructor function
  *
  */
-const mkTaskEither = task => new _TaskEither.TaskEither(task);
+const newTaskEither = task => new _TaskEither.TaskEither(task);
 /**
  * Run a TaskEither
  */
 
 
-exports.mkTaskEither = mkTaskEither;
+exports.newTaskEither = newTaskEither;
 
 const runTaskEither = x => x.run();
 /**
@@ -27,6 +27,6 @@ const runTaskEither = x => x.run();
 
 exports.runTaskEither = runTaskEither;
 
-const constRunTaskEither = x => x.run;
+const constRunTaskEither = x => x.value.run;
 
 exports.constRunTaskEither = constRunTaskEither;
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Array.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/Array.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Array.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Array.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/Array.jest.js
new file mode 100644
index 000000000..83963fe46
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Array.jest.js
@@ -0,0 +1,198 @@
+"use strict";
+
+var _Array = require("fp-ts/lib/Array");
+
+var _Either = require("fp-ts/lib/Either");
+
+var _IO = require("fp-ts/lib/IO");
+
+var _Option = require("fp-ts/lib/Option");
+
+var _Array2 = require("../Array");
+
+const isGreaterThanZero = x => x > 0;
+
+describe('all', () => {
+  it('should return false when a member of the array does not hold true for a predicate', () => {
+    const actual = (0, _Array2.all)([-1, 0, 1, 2, 3], isGreaterThanZero);
+    const expected = false;
+    expect(actual).toBe(expected);
+  });
+  it('should return true when a predicate holds true for all members of an array', () => {
+    const actual = (0, _Array2.all)([1, 2, 3, 4, 5], isGreaterThanZero);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+});
+describe('any', () => {
+  it('should return true when a predicate holds true for any member of an array', () => {
+    const actual = (0, _Array2.any)([-5, 0, -3, 2], isGreaterThanZero);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return false when a predicate holds true for no members of an array', () => {
+    const actual = (0, _Array2.any)([-5, -4, -3, -2, -1], isGreaterThanZero);
+    const expected = false;
+    expect(actual).toBe(expected);
+  });
+});
+describe('concat', () => {
+  it('should concatenate arrays correctly', () => {
+    const actual = (0, _Array2.concat)([0])([1]);
+
+    const expected = _Array.array.alt([0], [1]);
+
+    expect(actual).toEqual(expected);
+  });
+});
+describe('concatFlipped should concatenate arrays correctly', () => {
+  it('should concatenate arrays correctly', () => {
+    const actual = (0, _Array2.concatFlipped)([1])([0]);
+
+    const expected = _Array.array.alt([1], [0]);
+
+    expect(actual).toEqual(expected);
+  });
+});
+describe('contains', () => {
+  it('should return true when an array contains an element', () => {
+    const actual = (0, _Array2.contains)(0)([0, 1, 2]);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return false when an array does not contain an element', () => {
+    const actual = (0, _Array2.contains)(5)([0, 1, 2]);
+    const expected = false;
+    expect(actual).toBe(expected);
+  });
+});
+describe('forEach', () => {
+  it('should perform a side-effect using each elem of the array', () => {
+    const getActual = seed => {
+      let mut = seed;
+      (0, _Array2.forEach)([0, 1, 2, 3, 4], x => mut += x);
+      return mut;
+    };
+
+    const actual = getActual(0);
+    const expected = 10;
+    expect(actual).toBe(expected);
+  });
+});
+describe('forEachWithIndex', () => {
+  it('should perform a side-effect using each elem & index of the array', () => {
+    const getActual = seed => {
+      let mut = seed;
+      (0, _Array2.forEachWithIndex)([0, 1, 2, 3, 4], (x, i) => mut += x + i);
+      return mut;
+    };
+
+    const actual = getActual(0);
+    const expected = 20;
+    expect(actual).toBe(expected);
+  });
+});
+describe('intersperse', () => {
+  it('should insert a value in between all elements of an array', () => {
+    const actual = (0, _Array2.intersperse)('_', ['a', 'b', 'c']);
+    const expected = ['a', '_', 'b', '_', 'c'];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('intersperseMap', () => {
+  it('should insert the value returned by a function in between all elements of an array', () => {
+    const actual = (0, _Array2.intersperseMap)(x => `${x}_`, ['a', 'b', 'c']);
+    const expected = ['a', 'a_', 'b', 'b_', 'c'];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('intersperseMapWithIndex', () => {
+  it('should insert the value returned by a function in between all elements of an array', () => {
+    const actual = (0, _Array2.intersperseMapWithIndex)((x, i) => `${i}_`, ['a', 'b', 'c']);
+    const expected = ['a', '0_', 'b', '1_', 'c'];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('leftsAndRights', () => {
+  it('should separate & extract the lefts & rights in an array of eithers', () => {
+    const eithers = [(0, _Either.left)('error'), (0, _Either.right)(0), (0, _Either.right)(5)];
+    const actual = (0, _Array2.leftsAndRights)(eithers);
+    const expected = {
+      lefts: ['error'],
+      rights: [0, 5]
+    };
+    expect(actual).toEqual(expected);
+  });
+});
+describe('sortByAlpha', () => {
+  it('should sort a list of strings alphabetically', () => {
+    const actual = (0, _Array2.sortByAlpha)(['blueberry', 'apple', 'cranberry']);
+    const expected = ['apple', 'blueberry', 'cranberry'];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('sortByNumeric', () => {
+  it('should sort a list of strings numerically', () => {
+    const actual = (0, _Array2.sortByNumeric)([5, 3, 7, 4]);
+    const expected = (0, _Array2.sortByNumeric)([3, 4, 5, 7]);
+    expect(actual).toEqual(expected);
+  });
+});
+describe('len', () => {
+  it('should return the length of an array', () => {
+    const a = [0, 1, 2, 3];
+    const actual = a.length;
+    const expected = (0, _Array2.len)(a);
+    expect(actual).toBe(expected);
+  });
+});
+describe('liftOption2', () => {
+  it('should lift a function of 2 args into the context of Option', () => {
+    const add = x => y => x + y;
+
+    const addOpt = (0, _Array2.liftOption2)(add);
+    const actual = addOpt((0, _Option.some)(3))((0, _Option.some)(5)).getOrElse(0);
+    const expected = 8;
+    expect(actual).toBe(expected);
+  });
+});
+describe('map', () => {
+  it('should transform the values in an array', () => {
+    const a = [0, 1, 2, 3];
+    const actual = (0, _Array2.map)(x => x + 1)(a);
+    const expected = [1, 2, 3, 4];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('notAny', () => {
+  it('should return false when a predicate holds true for any member of an array', () => {
+    const actual = (0, _Array2.notAny)([-5, 0, -3, 2], isGreaterThanZero);
+    const expected = false;
+    expect(actual).toBe(expected);
+  });
+  it('should return true when a predicate holds true for no members of an array', () => {
+    const actual = (0, _Array2.notAny)([-5, -4, -3, -2, -1], isGreaterThanZero);
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+});
+describe('runIOs', () => {
+  it('run a series of side-effects contained within IOs', () => {
+    const getActual = seed => {
+      let mut = seed;
+      const ios = [new _IO.IO(() => {
+        mut += 1;
+      }), new _IO.IO(() => {
+        mut += 3;
+      }), new _IO.IO(() => {
+        mut += 5;
+      })];
+      (0, _Array2.runIOs)(ios);
+      return mut;
+    };
+
+    const actual = getActual(0);
+    const expected = 9;
+    expect(actual).toBe(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Either.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/Either.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Either.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Either.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/Either.jest.js
new file mode 100644
index 000000000..0aa2c5853
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Either.jest.js
@@ -0,0 +1,22 @@
+"use strict";
+
+var _Either = require("../Either");
+
+var _Either2 = require("fp-ts/lib/Either");
+
+describe('fold (Either)', () => {
+  const f = l => `Error: ${l}`;
+
+  const g = r => `Value: ${r}`;
+
+  it('should properly fold Eithers -- left', () => {
+    const actual = (0, _Either.fold)((0, _Either2.left)('invalid'), f, g);
+    const expected = 'Error: invalid';
+    expect(actual).toBe(expected);
+  });
+  it('should properly fold Eithers -- left', () => {
+    const actual = (0, _Either.fold)((0, _Either2.right)(9), f, g);
+    const expected = 'Value: 9';
+    expect(actual).toBe(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/IO.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/IO.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/IO.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/IO.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/IO.jest.js
new file mode 100644
index 000000000..809876477
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/IO.jest.js
@@ -0,0 +1,59 @@
+"use strict";
+
+var _IO = require("fp-ts/lib/IO");
+
+var _IO2 = require("../IO");
+
+describe('constRunIO', () => {
+  let num = 0;
+  const mutateNumIO = new _IO.IO(() => {
+    num = 3;
+  });
+  it('should return the run function for an IO<A>', () => {
+    const actual = (0, _IO2.constRunIO)(mutateNumIO)();
+    const expected = mutateNumIO.run();
+    expect(actual).toBe(expected);
+    expect(num).toBe(3);
+  });
+});
+describe('newIO', () => {
+  let num = 0;
+  const mutateNumIO = new _IO.IO(() => {
+    num = 5;
+  });
+  const mutateNumIO_ = (0, _IO2.newIO)(() => {
+    num = 5;
+  });
+  it('should create an IO<A>', () => {
+    const actual = mutateNumIO.run();
+    const expected = mutateNumIO_.run();
+    expect(actual).toBe(expected);
+    expect(num).toBe(5);
+  });
+});
+describe('noOpIO', () => {
+  it('should be a noOp function', () => {
+    const actual = _IO2.noOpIO.run.toString();
+
+    const expected = 'function constVoid() {}';
+    expect(actual).toBe(expected);
+  });
+  it('should return void', () => {
+    const actual = _IO2.noOpIO.run();
+
+    const expected = undefined;
+    expect(actual).toBe(expected);
+  });
+});
+describe('runIO', () => {
+  it('should run a possibly effectful function in IO', () => {
+    let num = 0;
+    const mutateNumIO = new _IO.IO(() => {
+      num = 2;
+    });
+    const actual = (0, _IO2.runIO)(mutateNumIO);
+    const expected = mutateNumIO.run();
+    expect(actual).toBe(expected);
+    expect(num).toBe(2);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Option.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/Option.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Option.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Option.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/Option.jest.js
new file mode 100644
index 000000000..035971f34
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Option.jest.js
@@ -0,0 +1,140 @@
+"use strict";
+
+var _react = require("react");
+
+var _Option = require("../Option");
+
+var _Option2 = require("fp-ts/lib/Option");
+
+describe('fold (Option)', () => {
+  it('should properly fold Options -- some', () => {
+    const actual = (0, _Option.fold)((0, _Option2.some)(3), 0, x => x + 1);
+    const expected = 4;
+    expect(actual).toBe(expected);
+  });
+  it('should properly fold Options -- none', () => {
+    const actual = (0, _Option.fold)(_Option2.none, 0, x => x - 1);
+    const expected = 0;
+    expect(actual).toBe(expected);
+  });
+});
+describe('fromTruthyFalsy', () => {
+  it('should return a none when given a Falsy value', () => {
+    const actual = (0, _Option.fromTruthyFalsy)(0);
+    const expected = _Option2.none;
+    expect(actual).toEqual(expected);
+  });
+  it('should return a Some<A> when given a Truthy value', () => {
+    const actual = (0, _Option.fromTruthyFalsy)({
+      value: 33
+    });
+    const expected = (0, _Option2.some)({
+      value: 33
+    });
+    expect(actual).toEqual(expected);
+  });
+});
+describe('getOrElse', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = (0, _Option.getOrElse)(0)((0, _Option2.some)(5));
+    const expected = 5;
+    expect(actual).toBe(expected);
+  });
+  it('should return a default value when given a none', () => {
+    const actual = (0, _Option.getOrElse)(0)(_Option2.none);
+    const expected = 0;
+    expect(actual).toEqual(expected);
+  });
+});
+describe('getOrEmptyArray', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = (0, _Option.getOrEmptyArray)((0, _Option2.some)([0, 1, 2, 3]));
+    const expected = [0, 1, 2, 3];
+    expect(actual).toEqual(expected);
+  });
+  it('should return an empty array when given a none', () => {
+    const actual = (0, _Option.getOrEmptyArray)(_Option2.none);
+    const expected = [];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('getOrEmptyString', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = (0, _Option.getOrEmptyString)((0, _Option2.some)('testing'));
+    const expected = 'testing';
+    expect(actual).toBe(expected);
+  });
+  it('should return an empty string when given a none', () => {
+    const actual = (0, _Option.getOrEmptyString)(_Option2.none);
+    const expected = '';
+    expect(actual).toEqual(expected);
+  });
+});
+describe('getOrZero', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = (0, _Option.getOrZero)((0, _Option2.some)(33));
+    const expected = 33;
+    expect(actual).toBe(expected);
+  });
+  it('should return 0 when given a none', () => {
+    const actual = (0, _Option.getOrZero)(_Option2.none);
+    const expected = 0;
+    expect(actual).toBe(expected);
+  });
+});
+describe('isOption', () => {
+  it('should return true if the value is an Option<A>', () => {
+    const actual = (0, _Option.isOption)((0, _Option2.some)(3));
+    const expected = true;
+    expect(actual).toBe(expected);
+  });
+  it('should return false if the value is not an Option<A>', () => {
+    const actual = (0, _Option.isOption)({
+      _tag: 'Some'
+    });
+    const expected = false;
+    expect(actual).toBe(expected);
+  });
+});
+describe('renderOnSome', () => {
+  it('should return null when given a none', () => {
+    const numOpt = _Option2.none;
+    const actual = (0, _Option.renderOnSome)(numOpt, x => (0, _react.createElement)('h1', {}, `Num: ${x}`));
+    const expected = null;
+    expect(actual).toBe(expected);
+  });
+  it('should return a ReactNode when given a some', () => {
+    const numOpt = (0, _Option2.some)(3);
+    const actual = (0, _Option.renderOnSome)(numOpt, x => (0, _react.createElement)('h1', {}, `Num: ${x}`));
+    const expected = (0, _react.createElement)('h1', {}, 'Num: 3');
+    expect(actual).toEqual(expected);
+  });
+});
+describe('toBoolean', () => {
+  it('should return false when given a none', () => {
+    const actual = (0, _Option.toBoolean)(_Option2.none);
+    const expected = false;
+    expect(actual).toEqual(expected);
+  });
+  it('should return true when given a some', () => {
+    const actual = (0, _Option.toBoolean)((0, _Option2.some)(3));
+    const expected = true;
+    expect(actual).toEqual(expected);
+  });
+});
+describe('toSpreadable', () => {
+  it('should return an empty array when given a none', () => {
+    const numOpt = _Option2.none;
+    const actual = (0, _Option.toSpreadable)(numOpt);
+    const expected = [];
+    expect(actual).toEqual(expected);
+    expect([...actual]).toEqual(expected);
+  });
+  it('should return an array containing one element when given a some', () => {
+    const numOpt = (0, _Option2.some)(2);
+    const actual = (0, _Option.toSpreadable)(numOpt);
+    const expected = [2];
+    expect(actual).toEqual(expected);
+    expect([...actual]).toEqual(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.js
new file mode 100644
index 000000000..2d5eda6e8
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.js
@@ -0,0 +1,119 @@
+"use strict";
+
+var _Setoid = require("fp-ts/lib/Setoid");
+
+var _Ord = require("../Ord");
+
+describe('ordAlpha', () => {
+  it('should contain a `compare` function that orders alphabetically', () => {
+    const actualA = _Ord.ordAlpha.compare('c', 'a');
+
+    const expectedA = (0, _Ord.alphaCompare)('c', 'a');
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(1);
+
+    const actualB = _Ord.ordAlpha.compare('b', 'b');
+
+    const expectedB = (0, _Ord.alphaCompare)('b', 'b');
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(0);
+
+    const actualC = _Ord.ordAlpha.compare('d', 'q');
+
+    const expectedC = (0, _Ord.alphaCompare)('d', 'q');
+    expect(actualC).toBe(expectedC);
+    expect(actualC).toBe(-1);
+  });
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = _Ord.ordAlpha.equals('c', 'a');
+
+    const expectedA = (0, _Setoid.strictEqual)('c', 'a');
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(false);
+
+    const actualB = _Ord.ordAlpha.equals('b', 'b');
+
+    const expectedB = (0, _Setoid.strictEqual)('b', 'b');
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(true);
+  });
+});
+describe('ordNumeric', () => {
+  it('should contain a `compare` function that orders alphabetically', () => {
+    const actualA = _Ord.ordNumeric.compare(3, -2);
+
+    const expectedA = (0, _Ord.numericCompare)(3, -2);
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(1);
+
+    const actualB = _Ord.ordNumeric.compare(2, 2);
+
+    const expectedB = (0, _Ord.numericCompare)(2, 2);
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(0);
+
+    const actualC = _Ord.ordNumeric.compare(-5, 4);
+
+    const expectedC = (0, _Ord.numericCompare)(-5, 4);
+    expect(actualC).toBe(expectedC);
+    expect(actualC).toBe(-1);
+  });
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = _Ord.ordNumeric.equals(3, -2);
+
+    const expectedA = (0, _Setoid.strictEqual)(3, -2);
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(false);
+
+    const actualB = _Ord.ordNumeric.equals(2, 2);
+
+    const expectedB = (0, _Setoid.strictEqual)(2, 2);
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(true);
+  });
+});
+describe('ordRecordWithNameLower', () => {
+  it('should compare { name: string } records by lowercase alpha', () => {
+    const actualA = _Ord.ordRecordWithNameLower.compare({
+      name: 'Josh'
+    }, {
+      name: 'adam'
+    });
+
+    const expectedA = (0, _Ord.recordWithNameLowerComparator)({
+      name: 'Josh'
+    }, {
+      name: 'adam'
+    });
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(1);
+
+    const actualB = _Ord.ordRecordWithNameLower.compare({
+      name: 'emily'
+    }, {
+      name: 'Luke'
+    });
+
+    const expectedB = (0, _Ord.recordWithNameLowerComparator)({
+      name: 'emily'
+    }, {
+      name: 'Luke'
+    });
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(-1);
+
+    const actualC = _Ord.ordRecordWithNameLower.compare({
+      name: 'David'
+    }, {
+      name: 'david'
+    });
+
+    const expectedC = (0, _Ord.recordWithNameLowerComparator)({
+      name: 'David'
+    }, {
+      name: 'david'
+    });
+    expect(actualC).toBe(expectedC);
+    expect(actualC).toBe(0);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Record.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/Record.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Record.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Record.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/Record.jest.js
new file mode 100644
index 000000000..1f11fec4e
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Record.jest.js
@@ -0,0 +1,98 @@
+"use strict";
+
+var _Record = require("../Record");
+
+var _Ord = require("../Ord");
+
+describe('keys', () => {
+  it('should return the keys of an object', () => {
+    const o = {
+      a: 0,
+      b: 'value',
+      c: {
+        nested: 'value'
+      }
+    };
+    const actual = (0, _Record.keys)(o);
+    const expected = Object.keys(o);
+    expect(actual).toEqual(expected);
+    expect(actual).toEqual(['a', 'b', 'c']);
+  });
+});
+describe('prop', () => {
+  it('should return the value at a key in an object', () => {
+    const o = {
+      a: 0,
+      b: 'value',
+      c: {
+        nested: 'value'
+      }
+    };
+    const actual = (0, _Record.prop)('b')(o);
+    const expected = o.b;
+    expect(actual).toBe(expected);
+    expect(actual).toBe('value');
+  });
+});
+describe('omit', () => {
+  it('should exclude key-val pairs associated with the given keys', () => {
+    const o = {
+      a: 0,
+      b: 'value',
+      c: {
+        nested: 'value'
+      }
+    };
+    const actual = (0, _Record.omit)(o, ['c']);
+    const expected = {
+      a: 0,
+      b: 'value'
+    };
+    expect(actual).toEqual(expected);
+  });
+});
+describe('pick', () => {
+  it('should include key-val pairs associated with the given keys', () => {
+    const o = {
+      a: 0,
+      b: 'value',
+      c: {
+        nested: 'value'
+      }
+    };
+    const actual = (0, _Record.pick)(o, ['c', 'a']);
+    const expected = {
+      a: 0,
+      c: {
+        nested: 'value'
+      }
+    };
+    expect(actual).toEqual(expected);
+  });
+});
+describe('sortRecords', () => {
+  it('should sort records by an zord', () => {
+    const recs = [{
+      name: 'Josh',
+      extra: 0
+    }, {
+      name: 'mike',
+      extra: 1
+    }, {
+      name: 'Adam',
+      extra: 3
+    }];
+    const actual = (0, _Record.sortRecords)(_Ord.ordRecordWithNameLower)(recs);
+    const expected = [{
+      name: 'Adam',
+      extra: 3
+    }, {
+      name: 'Josh',
+      extra: 0
+    }, {
+      name: 'mike',
+      extra: 1
+    }];
+    expect(actual).toEqual(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.js
new file mode 100644
index 000000000..bbdd17657
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.js
@@ -0,0 +1,127 @@
+"use strict";
+
+var _Setoid = require("fp-ts/lib/Setoid");
+
+var _shallowEqual = require("../../shallowEqual");
+
+var _Setoid2 = require("../Setoid");
+
+describe('setoidShallowEq', () => {
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = _Setoid2.setoidShallowEq.equals({
+      value: 'c'
+    }, {
+      value: 'a'
+    });
+
+    const expectedA = (0, _shallowEqual.shallowEqual)({
+      value: 'c'
+    }, {
+      value: 'a'
+    });
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(false);
+
+    const actualB = _Setoid2.setoidShallowEq.equals({
+      value: 'b'
+    }, {
+      value: 'b'
+    });
+
+    const expectedB = (0, _shallowEqual.shallowEqual)({
+      value: 'b'
+    }, {
+      value: 'b'
+    });
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(true);
+  });
+});
+describe('setoidStrict', () => {
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = _Setoid2.setoidStrict.equals('c', 'a');
+
+    const expectedA = (0, _Setoid.strictEqual)('c', 'a');
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(false);
+
+    const actualB = _Setoid2.setoidStrict.equals('b', 'b');
+
+    const expectedB = (0, _Setoid.strictEqual)('b', 'b');
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(true);
+  });
+});
+describe('getSetoidShallowEq', () => {
+  it('should contain a setoid equivalent to setoidShallowEq', () => {
+    const s = (0, _Setoid2.getSetoidShallowEq)();
+    const actual = s.equals({
+      value: 'c'
+    }, {
+      value: 'a'
+    });
+    const expected = (0, _shallowEqual.shallowEqual)({
+      value: 'c'
+    }, {
+      value: 'a'
+    });
+    expect(actual).toBe(expected);
+    expect(actual).toBe(false);
+    const actualB = s.equals({
+      value: 'b'
+    }, {
+      value: 'b'
+    });
+    const expectedB = (0, _shallowEqual.shallowEqual)({
+      value: 'b'
+    }, {
+      value: 'b'
+    });
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(true);
+  });
+});
+describe('getSetoidStrict', () => {
+  it('should contain a setoid equivalent to setoidStrict', () => {
+    const s = (0, _Setoid2.getSetoidStrict)();
+    const actualA = s.equals('c', 'a');
+    const expectedA = (0, _Setoid.strictEqual)('c', 'a');
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(false);
+    const actualB = s.equals('b', 'b');
+    const expectedB = (0, _Setoid.strictEqual)('b', 'b');
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(true);
+  });
+});
+describe('setoidRecordWithNameLower', () => {
+  it('should compare { name: string } records by lowercase alpha', () => {
+    const actualA = _Setoid2.setoidRecordWithNameLower.equals({
+      name: 'Josh B'
+    }, {
+      name: 'josh B'
+    });
+
+    const expectedA = (0, _Setoid2.recordWithNameLowerEquality)({
+      name: 'Josh B'
+    }, {
+      name: 'josh B'
+    });
+    expect(actualA).toBe(expectedA);
+    expect(actualA).toBe(true);
+
+    const actualB = _Setoid2.setoidRecordWithNameLower.equals({
+      name: 'Josh B'
+    }, {
+      name: 'joshua B'
+    });
+
+    const expectedB = (0, _Setoid2.recordWithNameLowerEquality)({
+      name: 'Josh B'
+    }, {
+      name: 'joshua B'
+    });
+    expect(actualB).toBe(expectedB);
+    expect(actualB).toBe(false);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.js
new file mode 100644
index 000000000..87698edb4
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.js
@@ -0,0 +1,26 @@
+"use strict";
+
+var _StrMap = require("fp-ts/lib/StrMap");
+
+var _StrMap2 = require("../StrMap");
+
+describe('newStrMap', () => {
+  it('should create a StrMap<A>', () => {
+    const actualA = (0, _StrMap2.newStrMap)({
+      a: 0,
+      b: 1,
+      c: 2
+    });
+    const expectedA = new _StrMap.StrMap({
+      a: 0,
+      b: 1,
+      c: 2
+    });
+    expect(actualA).toEqual(expectedA);
+    expect(actualA.value).toEqual({
+      a: 0,
+      b: 1,
+      c: 2
+    });
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Task.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/Task.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Task.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/Task.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/Task.jest.js
new file mode 100644
index 000000000..e596a863a
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/Task.jest.js
@@ -0,0 +1,34 @@
+"use strict";
+
+var _Task = require("fp-ts/lib/Task");
+
+var _Task2 = require("../Task");
+
+describe('constRunTask', () => {
+  const numTask = new _Task.Task(() => Promise.resolve(3));
+  it('should return the run function for a Task<A>', () => {
+    const actual = (0, _Task2.constRunTask)(numTask)();
+    const expected = numTask.run();
+    expect(actual).toEqual(expected);
+    expect(actual).toEqual(Promise.resolve(3));
+  });
+});
+describe('newTask', () => {
+  const numTask = new _Task.Task(() => Promise.resolve(5));
+  const numTask_ = (0, _Task2.newTask)(() => Promise.resolve(5));
+  it('should create a Task<A>', () => {
+    const actual = numTask.run();
+    const expected = numTask_.run();
+    expect(actual).toEqual(expected);
+    expect(actual).toEqual(Promise.resolve(5));
+  });
+});
+describe('runTask', () => {
+  it('should run a Task', () => {
+    const t = new _Task.Task(() => Promise.resolve(2));
+    const actual = (0, _Task2.runTask)(t);
+    const expected = t.run();
+    expect(actual).toEqual(expected);
+    expect(actual).toEqual(Promise.resolve(2));
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.js
new file mode 100644
index 000000000..bf0e4f352
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.js
@@ -0,0 +1,38 @@
+"use strict";
+
+var _Either = require("fp-ts/lib/Either");
+
+var _Task = require("fp-ts/lib/Task");
+
+var _TaskEither = require("fp-ts/lib/TaskEither");
+
+var _TaskEither2 = require("../TaskEither");
+
+describe('constRunTaskEither', () => {
+  it('should return the run function for a TaskEither<L, A>', () => {
+    const te = new _TaskEither.TaskEither(new _Task.Task(() => Promise.resolve((0, _Either.right)(3))));
+    const actual = (0, _TaskEither2.constRunTaskEither)(te)();
+    const expected = te.run();
+    expect(actual).toEqual(expected);
+    expect(actual).toEqual(Promise.resolve((0, _Either.right)(3)));
+  });
+});
+describe('newTaskEither', () => {
+  it('should create a TaskEither<L, A>', () => {
+    const te = new _TaskEither.TaskEither(new _Task.Task(() => Promise.resolve((0, _Either.left)('error'))));
+    const te_ = (0, _TaskEither2.newTaskEither)(new _Task.Task(() => Promise.resolve((0, _Either.left)('error'))));
+    const actual = te.run();
+    const expected = te_.run();
+    expect(actual).toEqual(expected);
+    expect(actual).toEqual(Promise.resolve((0, _Either.left)('error')));
+  });
+});
+describe('runTaskEither', () => {
+  it('should run a TaskEither<L, A>', () => {
+    const te = new _TaskEither.TaskEither(new _Task.Task(() => Promise.resolve((0, _Either.right)(2))));
+    const actual = (0, _TaskEither2.runTaskEither)(te);
+    const expected = te.run();
+    expect(actual).toEqual(expected);
+    expect(actual).toEqual(Promise.resolve((0, _Either.right)(2)));
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/function.jest.d.ts b/dist/sharedHelpers/fp-ts-ext/__tests__/function.jest.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/function.jest.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/dist/sharedHelpers/fp-ts-ext/__tests__/function.jest.js b/dist/sharedHelpers/fp-ts-ext/__tests__/function.jest.js
new file mode 100644
index 000000000..b46b03e22
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/__tests__/function.jest.js
@@ -0,0 +1,66 @@
+"use strict";
+
+var _function = require("../function");
+
+describe('constVoid', () => {
+  it('should be a noOp function', () => {
+    const actual = _function.constVoid.toString();
+
+    const expected = 'function constVoid() {}';
+    expect(actual).toBe(expected);
+  });
+  it('should return void', () => {
+    const actual = (0, _function.constVoid)();
+    const expected = undefined;
+    expect(actual).toBe(expected);
+  });
+});
+describe('flip_', () => {
+  it('should flip the order of the arguments of an uncurried function', () => {
+    const f = (x, y) => `${x}${y}`;
+
+    const g = (0, _function.flip_)(f);
+    const num = 4;
+    const str = '2';
+    const actual = g(str, num);
+    const expected = f(num, str);
+    expect(actual).toBe(expected);
+  });
+});
+describe('o', () => {
+  it('should compose 2 functions together properly', () => {
+    const init = 3;
+
+    const add1 = x => x + 1;
+
+    const showNum = x => `${x}`;
+
+    const actual = (0, _function.o)(showNum, add1)(init);
+    const expected = showNum(add1(init));
+    expect(actual).toBe(expected);
+  });
+});
+describe('swap', () => {
+  it('should swap the order of arguments in a 2-tuple', () => {
+    const actual = (0, _function.swap)([0, 1]);
+    const expected = [1, 0];
+    expect(actual).toEqual(expected);
+  });
+});
+describe('tuple', () => {
+  it('should create a 2-tuple', () => {
+    const actual = (0, _function.tuple)(0, 1);
+    const expected = [0, 1];
+    expect(actual).toEqual(expected);
+  });
+  it('should create a 3-tuple', () => {
+    const actual = (0, _function.tuple)(0, 1, 2);
+    const expected = [0, 1, 2];
+    expect(actual).toEqual(expected);
+  });
+  it('should create a 4-tuple', () => {
+    const actual = (0, _function.tuple)(0, 1, 2, 3);
+    const expected = [0, 1, 2, 3];
+    expect(actual).toEqual(expected);
+  });
+});
\ No newline at end of file
diff --git a/dist/sharedHelpers/fp-ts-ext/function.d.ts b/dist/sharedHelpers/fp-ts-ext/function.d.ts
new file mode 100644
index 000000000..c2e88a04f
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/function.d.ts
@@ -0,0 +1,20 @@
+import { Function2 } from 'fp-ts/lib/function';
+import { Primitive } from '../typeLevel';
+export declare const constVoid: () => void;
+/**
+ * Flips the order of the arguments to an uncurried function taking two
+ * arguments. Like `flip`, but for uncurried, not curried, functions.
+ */
+export declare const flip_: <A, B, C>(f: Function2<A, B, C>) => Function2<B, A, C>;
+/**
+ * Simple binary composition. Also known as `compose2`
+ */
+export declare const o: <A, B, C>(f: (y: B) => C, g: (x: A) => B) => (x: A) => C;
+/**
+ * Utility for constructing tuples with proper inference
+ */
+export declare const tuple: <A extends Primitive[]>(...args: A) => A;
+/**
+ * Flips the position of each item in a 2-tuple
+ */
+export declare const swap: <A, B>([x, y]: [A, B]) => [B, A];
diff --git a/dist/sharedHelpers/fp-ts-ext/function.js b/dist/sharedHelpers/fp-ts-ext/function.js
new file mode 100644
index 000000000..8a02efd0b
--- /dev/null
+++ b/dist/sharedHelpers/fp-ts-ext/function.js
@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.swap = exports.tuple = exports.o = exports.flip_ = exports.constVoid = void 0;
+
+const constVoid = () => {};
+/**
+ * Flips the order of the arguments to an uncurried function taking two
+ * arguments. Like `flip`, but for uncurried, not curried, functions.
+ */
+
+
+exports.constVoid = constVoid;
+
+const flip_ = f => (b, a) => f(a, b);
+/**
+ * Simple binary composition. Also known as `compose2`
+ */
+
+
+exports.flip_ = flip_;
+
+const o = (f, g) => x => f(g(x));
+/**
+ * Utility for constructing tuples with proper inference
+ */
+
+
+exports.o = o;
+
+const tuple = (...args) => args;
+/**
+ * Flips the position of each item in a 2-tuple
+ */
+
+
+exports.tuple = tuple;
+
+const swap = ([x, y]) => [y, x];
+
+exports.swap = swap;
\ No newline at end of file
diff --git a/dist/sharedHelpers/function.d.ts b/dist/sharedHelpers/function.d.ts
new file mode 100644
index 000000000..8b6b2c73a
--- /dev/null
+++ b/dist/sharedHelpers/function.d.ts
@@ -0,0 +1,11 @@
+import { Function2 } from 'fp-ts/lib/function';
+export declare const constVoid: () => void;
+/**
+ * Flips the order of the arguments to an uncurried function taking two
+ * arguments.
+ */
+export declare const flip_: <A, B, C>(f: Function2<A, B, C>) => Function2<B, A, C>;
+/**
+ * Simple binary composition. Also known as `compose2`
+ */
+export declare const o: <A, B, C>(f: (y: B) => C, g: (x: A) => B) => (x: A) => C;
diff --git a/dist/sharedHelpers/function.js b/dist/sharedHelpers/function.js
new file mode 100644
index 000000000..aadfffb6e
--- /dev/null
+++ b/dist/sharedHelpers/function.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.o = exports.flip_ = exports.constVoid = void 0;
+
+const constVoid = () => {};
+/**
+ * Flips the order of the arguments to an uncurried function taking two
+ * arguments.
+ */
+
+
+exports.constVoid = constVoid;
+
+const flip_ = f => (b, a) => f(a, b);
+/**
+ * Simple binary composition. Also known as `compose2`
+ */
+
+
+exports.flip_ = flip_;
+
+const o = (f, g) => x => f(g(x));
+
+exports.o = o;
\ No newline at end of file
diff --git a/dist/CoreUtils/json-encoders-decoders.d.ts b/dist/sharedHelpers/jsonEncodersDecoders.d.ts
similarity index 92%
rename from dist/CoreUtils/json-encoders-decoders.d.ts
rename to dist/sharedHelpers/jsonEncodersDecoders.d.ts
index e622c675b..2b8432a15 100644
--- a/dist/CoreUtils/json-encoders-decoders.d.ts
+++ b/dist/sharedHelpers/jsonEncodersDecoders.d.ts
@@ -1,6 +1,6 @@
 import * as t from 'io-ts';
 import { Option } from 'fp-ts/lib/Option';
-import { Getter } from 'monocle-ts';
+import { Getter, Lens } from 'monocle-ts';
 export declare type JSONNone = {
     _tag: 'None';
 };
@@ -37,5 +37,5 @@ export declare const createOptionFromJSON: <C extends t.Mixed>(codec: C, name?:
  * Helper utility for creating selectors that automatically handle decoding
  * JSONOptions back into Options when given a codec and a lens
  */
-export declare const mkJSONOptionDecoderSelector: <A>(codec: t.Type<Option<A>, JSONOption<A>, unknown>) => <S>(getter: Getter<S, JSONOption<A>>) => (s: S) => Option<A>;
+export declare const mkJSONOptionDecoderSelector: <A>(codec: t.Type<Option<A>, JSONOption<A>, unknown>) => <S>(getter: Getter<S, JSONOption<A>> | Lens<S, JSONOption<A>>) => (s: S) => Option<A>;
 export declare function transformDecodeError(errs: t.Errors): string;
diff --git a/dist/CoreUtils/json-encoders-decoders.js b/dist/sharedHelpers/jsonEncodersDecoders.js
similarity index 97%
rename from dist/CoreUtils/json-encoders-decoders.js
rename to dist/sharedHelpers/jsonEncodersDecoders.js
index c270c1d2c..8fd2db9ab 100644
--- a/dist/CoreUtils/json-encoders-decoders.js
+++ b/dist/sharedHelpers/jsonEncodersDecoders.js
@@ -16,7 +16,7 @@ var _IO = require("fp-ts/lib/IO");
 
 var _function = require("fp-ts/lib/function");
 
-var _general = require("./general");
+var _function2 = require("./fp-ts-ext/function");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
@@ -103,7 +103,7 @@ exports.createOptionFromJSON = createOptionFromJSON;
 const mkJSONOptionDecoderSelector = codec => getter => s => {
   const encoded = getter.get(s);
   const decoded = codec.decode(encoded);
-  const noOpIO = new _IO.IO(_general.constVoid);
+  const noOpIO = new _IO.IO(_function2.constVoid);
   const constNoOpIO = (0, _function.constant)(noOpIO); // TODO: consider better error handling
 
   const logErrorIO = decoded.fold(errs => (0, _Console.error)({
diff --git a/dist/CoreUtils/newtypes.d.ts b/dist/sharedHelpers/newtypes.d.ts
similarity index 70%
rename from dist/CoreUtils/newtypes.d.ts
rename to dist/sharedHelpers/newtypes.d.ts
index 06347cff0..1496fe718 100644
--- a/dist/CoreUtils/newtypes.d.ts
+++ b/dist/sharedHelpers/newtypes.d.ts
@@ -6,8 +6,4 @@ export interface NaN extends Newtype<{
     readonly NaN: unique symbol;
 }, number> {
 }
-/**
- * Alias for Number.isNaN
- */
-export declare const isNewtypeNaN: (number: number) => boolean;
 export declare const prismNaN: import("monocle-ts").Prism<number, NaN>;
diff --git a/dist/sharedHelpers/newtypes.js b/dist/sharedHelpers/newtypes.js
new file mode 100644
index 000000000..1d87bc59a
--- /dev/null
+++ b/dist/sharedHelpers/newtypes.js
@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prismNaN = void 0;
+
+var _newtypeTs = require("newtype-ts");
+
+// use this prism to return an option with prismNaN.getOption(someNumber)
+const prismNaN = (0, _newtypeTs.prism)(Number.isNaN);
+exports.prismNaN = prismNaN;
\ No newline at end of file
diff --git a/dist/CoreUtils/optics.d.ts b/dist/sharedHelpers/optics.d.ts
similarity index 70%
rename from dist/CoreUtils/optics.d.ts
rename to dist/sharedHelpers/optics.d.ts
index a9c12f083..4694441f6 100644
--- a/dist/CoreUtils/optics.d.ts
+++ b/dist/sharedHelpers/optics.d.ts
@@ -18,16 +18,14 @@ export declare type ExtractAFromLens<L extends Lens<any, any>> = L extends Lens<
  * A function that generates monocle-ts Lenses for all top-level key-val pairs
  * when passed an object
  */
-export declare const lensesFromRecord: <A extends {
-    [key: string]: unknown;
-}, K extends keyof A & string, LensRecord extends { [P in K]: Lens<A, A[P]>; }, LensRecord_ extends {
-    [key: string]: Lens<A, A[K]>;
-}>(x: A) => LensRecord;
+export declare const lensesFromRecord: <A extends Record<string, unknown>, K extends keyof A & string, LensRecord extends { [P in K]: Lens<A, A[P]>; }, IndexedLensRecord extends Record<string, Lens<A, A[K]>>>(x: A) => LensRecord;
 /**
  * Creates an Optional optic for a given index in some Array<A>
  */
 export declare const mkArrayIndexOptional: <S extends A[], A>(i: number) => Optional<S, A>;
 /**
  * Creates an Optional optic for a given key K in some Record<K, A>
+ *
+ * TODO: Consider rewriting this in a different way
  */
-export declare const mkRecordKeyOptional: <S extends Record<K, A>, K extends keyof S & string, A extends S[K]>(k: K) => Optional<S, A>;
+export declare const mkRecordKeyOptional: <S extends Record<string, S[K]>, K extends keyof S & string>(k: K) => Optional<S, S[K]>;
diff --git a/dist/CoreUtils/optics.js b/dist/sharedHelpers/optics.js
similarity index 87%
rename from dist/CoreUtils/optics.js
rename to dist/sharedHelpers/optics.js
index e5db34590..e84c7989e 100644
--- a/dist/CoreUtils/optics.js
+++ b/dist/sharedHelpers/optics.js
@@ -34,10 +34,10 @@ exports.oLens = oLens;
  * when passed an object
  */
 const lensesFromRecord = x => {
-  const result = {};
+  let result = {};
 
   for (const k of Object.keys(x)) {
-    result[k] = _monocleTs.Lens.fromProp()(k);
+    result = (0, _Record.insert)(k, _monocleTs.Lens.fromProp()(k), result);
   }
 
   return result;
@@ -49,9 +49,11 @@ const lensesFromRecord = x => {
 
 exports.lensesFromRecord = lensesFromRecord;
 
-const mkArrayIndexOptional = i => new _monocleTs.Optional(xs => (0, _Array.index)(i, xs), a => xs => (0, _Array.insertAt)(i, a, xs).fold(_Array.array.of(a), ys => (0, _Array.cons)(a, ys)));
+const mkArrayIndexOptional = i => new _monocleTs.Optional(xs => (0, _Array.index)(i, xs), a => xs => (0, _Array.updateAt)(i, a, xs).fold(_Array.array.of(a), ys => (0, _Array.cons)(a, ys)));
 /**
  * Creates an Optional optic for a given key K in some Record<K, A>
+ *
+ * TODO: Consider rewriting this in a different way
  */
 
 
diff --git a/dist/CoreUtils/shallowEqual.d.ts b/dist/sharedHelpers/shallowEqual.d.ts
similarity index 100%
rename from dist/CoreUtils/shallowEqual.d.ts
rename to dist/sharedHelpers/shallowEqual.d.ts
diff --git a/dist/CoreUtils/shallowEqual.js b/dist/sharedHelpers/shallowEqual.js
similarity index 100%
rename from dist/CoreUtils/shallowEqual.js
rename to dist/sharedHelpers/shallowEqual.js
diff --git a/dist/CoreUtils/String.d.ts b/dist/sharedHelpers/strings.d.ts
similarity index 60%
rename from dist/CoreUtils/String.d.ts
rename to dist/sharedHelpers/strings.d.ts
index 945de00ba..830a978fe 100644
--- a/dist/CoreUtils/String.d.ts
+++ b/dist/sharedHelpers/strings.d.ts
@@ -1,15 +1,22 @@
 import { Option } from 'fp-ts/lib/Option';
-import { Ord } from 'fp-ts/lib/Ord';
-import { Ordering } from 'fp-ts/lib/Ordering';
 /**
  * Given a string or RegExp separator and a string, splits a string into an
  * array of strings
  */
 export declare const split: (sep: string | RegExp) => (xs: string) => string[];
+/**
+ * Replaces text in a string, using an object that supports replacement within a string.
+ */
+export declare const replace: (searchValue: {
+    [Symbol.replace](string: string, replaceValue: string): string;
+}, replaceValue: string) => (xs: string) => string;
 /**
  * Translates a space separated name string into a first & last name record
  */
-export declare const splitName: (name: string) => Record<"first" | "last", string>;
+export declare const splitName: (name: string) => {
+    first: string;
+    last: string;
+};
 /**
  * Returns the position of the first occurrence of a substring wrapped in a Some
  * or returns a None if the substring is not found
@@ -19,19 +26,6 @@ export declare const findIndex: (substring: string) => (xs: string) => Option<nu
  * Converts all the alphabetic characters in a string to lowercase.
  */
 export declare const toLower: (x: string) => string;
-/**
- * Converts all alphabetic characters to lowercase, taking into account the
- * host environment's current locale.
- */
-export declare const toLocaleLower: (x: string) => string;
-/**
- * Determines ordering of two strings (alphabetic comparison)
- */
-export declare const alphaCompare: (x: string, y: string) => Ordering;
-/**
- * Ord instance for string
- */
-export declare const ordAlpha: Ord<string>;
 /**
  * Takes a string and removes the spaces at the end of strings
  */
diff --git a/dist/CoreUtils/String.js b/dist/sharedHelpers/strings.js
similarity index 57%
rename from dist/CoreUtils/String.js
rename to dist/sharedHelpers/strings.js
index 48a3668e2..de495c049 100644
--- a/dist/CoreUtils/String.js
+++ b/dist/sharedHelpers/strings.js
@@ -5,17 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.trim = trim;
 exports.join = join;
-exports.ordAlpha = exports.alphaCompare = exports.toLocaleLower = exports.toLower = exports.findIndex = exports.splitName = exports.split = void 0;
+exports.toLower = exports.findIndex = exports.splitName = exports.replace = exports.split = void 0;
 
 var _Array = require("fp-ts/lib/Array");
 
 var _Option = require("fp-ts/lib/Option");
 
-var _Setoid = require("fp-ts/lib/Setoid");
+var _function = require("./fp-ts-ext/function");
 
-var _general = require("./general");
-
-var _Option2 = require("./Option");
+var _Option2 = require("./fp-ts-ext/Option");
 
 /**
  * Given a string or RegExp separator and a string, splits a string into an
@@ -23,16 +21,24 @@ var _Option2 = require("./Option");
  */
 const split = sep => xs => xs.split(sep);
 /**
- * Translates a space separated name string into a first & last name record
+ * Replaces text in a string, using an object that supports replacement within a string.
  */
 
 
 exports.split = split;
 
+const replace = (searchValue, replaceValue) => xs => xs.replace(searchValue, replaceValue);
+/**
+ * Translates a space separated name string into a first & last name record
+ */
+
+
+exports.replace = replace;
+
 const splitName = name => {
   const xs = split(' ')(name);
 
-  const safeGetVia = f => (0, _general.o)(_Option2.getOrEmptyString, f)(xs);
+  const safeGetVia = f => (0, _function.o)(_Option2.getOrEmptyString, f)(xs);
 
   return {
     first: safeGetVia(_Array.head),
@@ -60,38 +66,12 @@ exports.findIndex = findIndex;
 
 const toLower = x => x.toLowerCase();
 /**
- * Converts all alphabetic characters to lowercase, taking into account the
- * host environment's current locale.
+ * Takes a string and removes the spaces at the end of strings
  */
 
 
 exports.toLower = toLower;
 
-const toLocaleLower = x => x.toLocaleLowerCase();
-/**
- * Determines ordering of two strings (alphabetic comparison)
- */
-
-
-exports.toLocaleLower = toLocaleLower;
-
-const alphaCompare = (x, y) => x < y ? -1 : x > y ? 1 : 0;
-/**
- * Ord instance for string
- */
-
-
-exports.alphaCompare = alphaCompare;
-const ordAlpha = {
-  equals: _Setoid.strictEqual,
-  compare: alphaCompare
-  /**
-   * Takes a string and removes the spaces at the end of strings
-   */
-
-};
-exports.ordAlpha = ordAlpha;
-
 function trim(str) {
   return str.trim();
 }
diff --git a/dist/CoreUtils/tagged-unions.d.ts b/dist/sharedHelpers/taggedUnions.d.ts
similarity index 58%
rename from dist/CoreUtils/tagged-unions.d.ts
rename to dist/sharedHelpers/taggedUnions.d.ts
index 9041fb43d..fcb950de8 100644
--- a/dist/CoreUtils/tagged-unions.d.ts
+++ b/dist/sharedHelpers/taggedUnions.d.ts
@@ -9,9 +9,9 @@ export declare type StringIndexed<A extends object> = A & {
 export declare type Tagged<A = string> = {
     tag: A;
 };
-export interface MinimalReduxAction<A extends string> extends Action<A> {
+export interface MinReduxAction<A extends string> extends Action<A> {
 }
-export interface MinimalTaggedType<A extends string> extends Tagged<A> {
+export interface MinTaggedType<A extends string> extends Tagged<A> {
 }
 export declare type TagKeyOf<A extends object> = keyof A & string;
 export declare type DataConstructorTagValue<A extends object, DataConstructorTagKey extends TagKeyOf<A>> = A[DataConstructorTagKey] & string;
@@ -19,12 +19,12 @@ export declare type TaggedType<A extends object, DataConstructorTagKey extends T
     [K in DataConstructorTagKey]: Value;
 }>;
 export declare type TaggedUnionMember<A extends object, DataConstructorTagKey extends TagKeyOf<A>, Value extends DataConstructorTagValue<A, DataConstructorTagKey>> = TaggedType<A, DataConstructorTagKey, Value>;
-export declare const MemberTag = "MemberTag";
-export declare type MemberTag = typeof MemberTag;
+export declare const __ = "__";
+export declare type __ = typeof __;
 export declare type Constructors<A extends object, DataConstructorTagKey extends TagKeyOf<A>> = {
     [K in DataConstructorTagValue<A, DataConstructorTagKey>]: Omit<TaggedUnionMember<A, DataConstructorTagKey, K>, DataConstructorTagKey> extends Exact<Pick<unknown, never>, Omit<TaggedUnionMember<A, DataConstructorTagKey, K>, DataConstructorTagKey>> ? Lazy<A> : (x: Omit<TaggedUnionMember<A, DataConstructorTagKey, K>, DataConstructorTagKey>) => A;
 };
-export declare const mkConstructors: <A extends object>() => <DataConstructorTagKey extends TagKeyOf<A>>(tag: DataConstructorTagKey, memberTagRecord: { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "MemberTag"; }) => Constructors<A, DataConstructorTagKey>;
+export declare const mkConstructors: <A extends object>() => <DataConstructorTagKey extends TagKeyOf<A>>(tag: DataConstructorTagKey, memberTagRecord: { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "__"; }) => Constructors<A, DataConstructorTagKey>;
 export declare type Fold<A extends object, DataConstructorTagKey extends TagKeyOf<A>> = A[DataConstructorTagKey] extends string ? (<B>(memberTagHandlerRecord: {
     [K in DataConstructorTagValue<A, DataConstructorTagKey>]: (x: TaggedUnionMember<A, DataConstructorTagKey, K>) => B;
 }) => (a: A) => B) : never;
@@ -32,9 +32,9 @@ export declare const mkFold: <A extends object>() => <DataConstructorTagKey exte
 export declare type Guards<A extends object, DataConstructorTagKey extends TagKeyOf<A>> = {
     [K in DataConstructorTagValue<A, DataConstructorTagKey>]: (x: A) => x is TaggedUnionMember<A, DataConstructorTagKey, K>;
 } & {
-    MemberOfUnion: (action: object) => action is A;
+    memberOfUnion: (action: object) => action is A;
 };
-export declare const mkGuards: <A extends object>() => <DataConstructorTagKey extends TagKeyOf<A>>(tag: DataConstructorTagKey, memberTagRecord: { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "MemberTag"; }) => Guards<A, DataConstructorTagKey>;
+export declare const mkGuards: <A extends object>() => <DataConstructorTagKey extends TagKeyOf<A>>(tag: DataConstructorTagKey, memberTagRecord: { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "__"; }) => Guards<A, DataConstructorTagKey>;
 export declare type TaggedUnionExt<DataConstructorTagKey extends TagKeyOf<A>, A extends object> = Constructors<A, DataConstructorTagKey> & {
     is: Guards<A, DataConstructorTagKey>;
 } & {
@@ -42,23 +42,9 @@ export declare type TaggedUnionExt<DataConstructorTagKey extends TagKeyOf<A>, A
 } & {
     tags: string[];
 };
-export declare const mkTaggedUnionCustom: <A extends object>() => <DataConstructorTagKey extends TagKeyOf<A>, MemberTagsRecord extends Exact<{ [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "MemberTag"; }, MemberTagsRecord>>(tag: DataConstructorTagKey, memberTagsRecord: MemberTagsRecord) => TaggedUnionExt<DataConstructorTagKey, A>;
+export declare const mkTaggedUnionCustom: <A extends object>() => <DataConstructorTagKey extends TagKeyOf<A>, MemberTagsRecord extends Exact<{ [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "__"; }, MemberTagsRecord>>(tag: DataConstructorTagKey, memberTagsRecord: MemberTagsRecord) => TaggedUnionExt<DataConstructorTagKey, A>;
 export interface MinimalTaggedUnionMember {
     tag: string;
 }
-export declare const mkTaggedUnion: <A extends MinimalTaggedUnionMember>() => <DataConstructorTagKey extends keyof A & "tag", MemberTagsRecord extends Exact<{ [K in DataConstructorTagValue<A, DataConstructorTagKey>]: DataConstructorTagValue<A, DataConstructorTagKey>; }, MemberTagsRecord>>(memberTagsRecord: MemberTagsRecord) => TaggedUnionExt<DataConstructorTagKey, A>;
-export declare type ReduxActionsUnionExt<DataConstructorTagKey extends TagKeyOf<A> & 'type', A extends MinimalReduxAction<DataConstructorTagValue<A, DataConstructorTagKey>>> = Constructors<A, DataConstructorTagKey> & {
-    is: Guards<A, DataConstructorTagKey>;
-} & {
-    fold: Fold<A, DataConstructorTagKey>;
-} & {
-    tags: string[];
-} & {
-    reducer: Reducer<A, DataConstructorTagKey>;
-};
-declare type Reducer<A extends MinimalReduxAction<DataConstructorTagValue<A, DataConstructorTagKey>>, DataConstructorTagKey extends TagKeyOf<A> & 'type'> = <S>(init: S) => (updateLogic: (s: S) => {
-    [K in DataConstructorTagValue<A, DataConstructorTagKey>]: (x: TaggedUnionMember<A, DataConstructorTagKey, K>) => S;
-}) => (state: S | undefined, action: A) => S;
-export declare const mkReducer: <A extends MinimalReduxAction<DataConstructorTagValue<A, DataConstructorTagKey>>, DataConstructorTagKey extends keyof A & "type">(reduxActionsUnionExt: TaggedUnionExt<DataConstructorTagKey, A>) => Reducer<A, DataConstructorTagKey>;
-export declare const mkReduxActionsUnion: <A extends MinimalReduxAction<DataConstructorTagValue<A, DataConstructorTagKey>>, DataConstructorTagKey extends keyof A & "type" = keyof A & "type">() => <MemberTagsRecord extends Exact<{ [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "MemberTag"; }, MemberTagsRecord>>(memberTagsRecord: MemberTagsRecord) => ReduxActionsUnionExt<DataConstructorTagKey, A>;
-export {};
+export declare const mkTaggedUnion: <A extends MinimalTaggedUnionMember>() => <DataConstructorTagKey extends keyof A & "tag", MemberTagsRecord extends Exact<{ [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "__"; }, MemberTagsRecord>>(memberTagsRecord: MemberTagsRecord) => TaggedUnionExt<DataConstructorTagKey, A>;
+export declare const mkActionsUnion: <A extends MinReduxAction<DataConstructorTagValue<A, DataConstructorTagKey>>, DataConstructorTagKey extends keyof A & "type" = keyof A & "type">() => <MemberTagsRecord extends Exact<{ [K in DataConstructorTagValue<A, DataConstructorTagKey>]: "__"; }, MemberTagsRecord>>(memberTagsRecord: MemberTagsRecord) => TaggedUnionExt<DataConstructorTagKey, A>;
diff --git a/dist/CoreUtils/tagged-unions.js b/dist/sharedHelpers/taggedUnions.js
similarity index 68%
rename from dist/CoreUtils/tagged-unions.js
rename to dist/sharedHelpers/taggedUnions.js
index f63b9a0b0..1b5bc415b 100644
--- a/dist/CoreUtils/tagged-unions.js
+++ b/dist/sharedHelpers/taggedUnions.js
@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mkReduxActionsUnion = exports.mkReducer = exports.mkTaggedUnion = exports.mkTaggedUnionCustom = exports.mkGuards = exports.mkFold = exports.mkConstructors = exports.MemberTag = void 0;
+exports.mkActionsUnion = exports.mkTaggedUnion = exports.mkTaggedUnionCustom = exports.mkGuards = exports.mkFold = exports.mkConstructors = exports.__ = void 0;
 // switch to this after updating to redux > 4.0
 // import { Action } from 'redux'
-const MemberTag = 'MemberTag';
-exports.MemberTag = MemberTag;
+const __ = '__';
+exports.__ = __;
 
 const mkConstructors = () => (tag, memberTagRecord) => {
   const result = {};
@@ -43,7 +43,7 @@ const mkGuards = () => (tag, memberTagRecord) => {
   }
 
   return { ...result,
-    MemberOfUnion: action => {
+    memberOfUnion: action => {
       const guards = Object.values(result);
 
       if (!(tag in action)) {
@@ -83,16 +83,6 @@ const mkTaggedUnion = () => memberTagsRecord => mkTaggedUnionCustom()('tag', mem
 
 exports.mkTaggedUnion = mkTaggedUnion;
 
-const mkReducer = reduxActionsUnionExt => init => updateLogic => (state = init, action) => reduxActionsUnionExt.is.MemberOfUnion(action) ? reduxActionsUnionExt.fold(updateLogic(state))(action) : state;
+const mkActionsUnion = () => memberTagsRecord => mkTaggedUnionCustom()('type', memberTagsRecord);
 
-exports.mkReducer = mkReducer;
-
-const mkReduxActionsUnion = () => memberTagsRecord => {
-  const reduxActionsUnionExt = mkTaggedUnionCustom()('type', memberTagsRecord);
-  const reducer = mkReducer(reduxActionsUnionExt);
-  return { ...reduxActionsUnionExt,
-    reducer
-  };
-};
-
-exports.mkReduxActionsUnion = mkReduxActionsUnion;
\ No newline at end of file
+exports.mkActionsUnion = mkActionsUnion;
\ No newline at end of file
diff --git a/dist/CoreUtils/primitive-guards.d.ts b/dist/sharedHelpers/typeGuards.d.ts
similarity index 63%
rename from dist/CoreUtils/primitive-guards.d.ts
rename to dist/sharedHelpers/typeGuards.d.ts
index d1c801be6..37414a510 100644
--- a/dist/CoreUtils/primitive-guards.d.ts
+++ b/dist/sharedHelpers/typeGuards.d.ts
@@ -1,3 +1,4 @@
+import { Falsy } from './typeLevel';
 /**
  * Tests whether or not an argument is null (type guard)
  */
@@ -19,14 +20,30 @@ export declare const isFalse: (x: unknown) => x is false;
  */
 export declare const isTrue: (x: unknown) => x is true;
 /**
- * Type guard for the `` literal of the `string` primitive
+ * Type guard for the '' literal of the `string` primitive
  */
 export declare const isEmptyString: (x: unknown) => x is "";
 /**
  * Type guard for the `0` literal of the `number` primitive
  */
 export declare const isZero: (x: unknown) => x is 0;
+/**
+ * Type guard for the Falsy type
+ */
+export declare const isFalsy: (x: any) => x is Falsy;
+/**
+ * Type guard for the `string` primitive
+ */
+export declare const isString: (x: unknown) => x is string;
 /**
  * Type guard for the `number` primitive
  */
 export declare const isNumber: (x: unknown) => x is number;
+/**
+ * Type guard for the `object` primitive
+ */
+export declare const isObject: (x: unknown) => x is object;
+/**
+ * Type guard for the `Function` primitive
+ */
+export declare const isFunction: (x: unknown) => x is (params: unknown) => void;
diff --git a/dist/CoreUtils/primitive-guards.js b/dist/sharedHelpers/typeGuards.js
similarity index 50%
rename from dist/CoreUtils/primitive-guards.js
rename to dist/sharedHelpers/typeGuards.js
index a0512bcd0..cf948455d 100644
--- a/dist/CoreUtils/primitive-guards.js
+++ b/dist/sharedHelpers/typeGuards.js
@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isNumber = exports.isZero = exports.isEmptyString = exports.isTrue = exports.isFalse = exports.isNil = exports.isUndefined = exports.isNull = void 0;
+exports.isFunction = exports.isObject = exports.isNumber = exports.isString = exports.isFalsy = exports.isZero = exports.isEmptyString = exports.isTrue = exports.isFalse = exports.isNil = exports.isUndefined = exports.isNull = void 0;
 
 /**
  * Tests whether or not an argument is null (type guard)
@@ -42,13 +42,13 @@ exports.isFalse = isFalse;
 
 const isTrue = x => typeof x === 'boolean' && x === true;
 /**
- * Type guard for the `` literal of the `string` primitive
+ * Type guard for the '' literal of the `string` primitive
  */
 
 
 exports.isTrue = isTrue;
 
-const isEmptyString = x => typeof x === 'string' && x === '';
+const isEmptyString = x => isString(x) && x === '';
 /**
  * Type guard for the `0` literal of the `number` primitive
  */
@@ -56,14 +56,47 @@ const isEmptyString = x => typeof x === 'string' && x === '';
 
 exports.isEmptyString = isEmptyString;
 
-const isZero = x => typeof x === 'number' && x === 0;
+const isZero = x => isNumber(x) && x === 0;
 /**
- * Type guard for the `number` primitive
+ * Type guard for the Falsy type
  */
+// tslint:disable-next-line:no-any
 
 
 exports.isZero = isZero;
 
+const isFalsy = x => isNil(x) || isFalse(x) || isEmptyString(x) || isZero(x) || isNumber(x) && Number.isNaN(x);
+/**
+ * Type guard for the `string` primitive
+ */
+
+
+exports.isFalsy = isFalsy;
+
+const isString = x => typeof x === 'string';
+/**
+ * Type guard for the `number` primitive
+ */
+
+
+exports.isString = isString;
+
 const isNumber = x => typeof x === 'number';
+/**
+ * Type guard for the `object` primitive
+ */
+
+
+exports.isNumber = isNumber;
+
+const isObject = x => !isNull(x) && typeof x === 'object' && x instanceof Object;
+/**
+ * Type guard for the `Function` primitive
+ */
+
+
+exports.isObject = isObject;
+
+const isFunction = x => x instanceof Function;
 
-exports.isNumber = isNumber;
\ No newline at end of file
+exports.isFunction = isFunction;
\ No newline at end of file
diff --git a/dist/CoreUtils/type-level.d.ts b/dist/sharedHelpers/typeLevel.d.ts
similarity index 87%
rename from dist/CoreUtils/type-level.d.ts
rename to dist/sharedHelpers/typeLevel.d.ts
index de6f346c0..4e0b45a9b 100644
--- a/dist/CoreUtils/type-level.d.ts
+++ b/dist/sharedHelpers/typeLevel.d.ts
@@ -1,8 +1,6 @@
 import { HKT, HKT2, HKT3, HKT4, URIS, URIS2, URIS3, URIS4 } from 'fp-ts/lib/HKT';
 import { Either } from 'fp-ts/lib/Either';
 import { Option } from 'fp-ts/lib/Option';
-import { ClassAttributes, Component, ComponentState, HTMLAttributes } from 'react';
-import { ThemedOuterStyledProps } from 'styled-components';
 import { NaN } from './newtypes';
 /**
  * Type representing possible TypeScript primitive types
@@ -57,15 +55,6 @@ export declare type ExtractTFromArray<A extends Array<unknown>> = ExtractAFromHK
  */
 export declare type ExtractLFromEither<E extends Either<unknown, unknown>> = ExtractLFromHKT2<E>;
 export declare type ExtractAFromEither<E extends Either<unknown, unknown>> = ExtractAFromHKT2<E>;
-/**
- * Type utility for use with styled wrapper refs
- *
- * NOTE: This is somewhat of a hack... it's a workaround
- * for dealing with the difficulty of passing refs through
- * to components made by the `styled` function of
- * styled-components when extending an HTMLElement
- */
-export declare type StyledHtmlElement<BaseType, BaseTypeProps, ThemeType = unknown> = BaseType & Component<ThemedOuterStyledProps<BaseTypeProps & ClassAttributes<BaseType> & HTMLAttributes<BaseType>, ThemeType>, ComponentState>;
 /**
  * Generic nullable type for unions with `null`
  */
@@ -103,3 +92,9 @@ export declare type IfIsNeverThenElse<A, Then, Else> = IfIsThenElse<A, never, Th
 export declare type RequireNonNilable<A> = {
     [P in keyof A]-?: NonNilable<A[P]>;
 };
+/**
+ * Map over `Record` property values and unbox those of type `Option<A>` to type `A`
+ */
+export declare type UnboxRecordPropertyOptionValues<R extends Record<PropertyKey, unknown>> = {
+    [K in keyof R]: R[K] extends Option<infer A> ? A : R[K];
+};
diff --git a/dist/CoreUtils/type-level.js b/dist/sharedHelpers/typeLevel.js
similarity index 100%
rename from dist/CoreUtils/type-level.js
rename to dist/sharedHelpers/typeLevel.js
diff --git a/dist/sidebar/ContextMenu.d.ts b/dist/sidebar/ContextMenu.d.ts
index a80656f68..2e656c50e 100644
--- a/dist/sidebar/ContextMenu.d.ts
+++ b/dist/sidebar/ContextMenu.d.ts
@@ -20,7 +20,7 @@ export declare class ContextMenu extends Component<Props> {
     static defaultProps: {
         renderFilter: () => null;
     };
-    searchRef: React.RefObject<import("../CoreUtils/type-level").StyledHtmlElement<HTMLInputElement, import("../inputs/Search").BBSearchInputProps, unknown>>;
+    searchRef: React.RefObject<HTMLInputElement>;
     componentDidUpdate(prevProps: Readonly<Props>): void;
     renderContextMenuItems: (compareSearch: (stringToCompare: string) => boolean) => import("fp-ts/lib/Option").Option<(JSX.Element | JSX.Element[])[]>[];
     render(): JSX.Element;
diff --git a/dist/sidebar/ContextMenu.js b/dist/sidebar/ContextMenu.js
index 8c67e8ecc..8985242b4 100644
--- a/dist/sidebar/ContextMenu.js
+++ b/dist/sidebar/ContextMenu.js
@@ -25,7 +25,7 @@ var _Array = require("fp-ts/lib/Array");
 
 var _Option = require("fp-ts/lib/Option");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,19 +38,20 @@ const SearchContainer =
 _styledComponents.default.div.withConfig({
   displayName: "ContextMenu__SearchContainer",
   componentId: "n6aqip-0"
-})(["display:flex;align-items:center;"]);
+})(["", ";align-items:center;flex-shrink:0;"], (0, _CommonStyles.flexFlow)('row'));
 
 const MenuHeader =
 /*#__PURE__*/
-(0, _styledComponents.default)('span').withConfig({
+_styledComponents.default.span.withConfig({
   displayName: "ContextMenu__MenuHeader",
   componentId: "n6aqip-1"
-})(["", ";", ";color:", ";flex-shrink:0;", ";"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5, '12px'), _CommonStyles.ellipsis, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black62), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";color:", ";flex-shrink:0;", ";"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5, '12px'), _CommonStyles.ellipsis, (0, _CommonStyles.colors)(_CommonStyles.Colors.Black62), cssOverrides));
+
 const MenuItemIconRow =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "ContextMenu__MenuItemIconRow",
   componentId: "n6aqip-2"
 })(["", ";flex:1 1 100%;margin:8px 6px 12px;"], (0, _CommonStyles.flexFlow)('row'));
@@ -70,17 +71,17 @@ const ContextMenuItem = ({
   dense: dense,
   size: size,
   cssOverrides: (0, _styledComponents.css)(["padding:0 6px;", ";"], cssOverrides)
-}, otherProps), !(0, _primitiveGuards.isNil)(leftIcon) && _react.default.createElement(_List.ListItemGraphic, {
+}, otherProps), !(0, _typeGuards.isNil)(leftIcon) && _react.default.createElement(_List.ListItemGraphic, {
   icon: leftIcon,
   dense: dense,
   cssOverrides: (0, _styledComponents.css)(["margin-top:12px;"])
-}), (0, _primitiveGuards.isNil)(secondaryText) && (0, _primitiveGuards.isNil)(meta) ? _react.default.createElement(_List.ListItemPrimaryText, {
+}), (0, _typeGuards.isNil)(secondaryText) && (0, _typeGuards.isNil)(meta) ? _react.default.createElement(_List.ListItemPrimaryText, {
   cssOverrides: (0, _styledComponents.css)(["margin-top:12px;"])
 }, primaryText) : _react.default.createElement(_List.ListItemText, null, _react.default.createElement(_List.ListItemPrimaryText, {
   cssOverrides: (0, _styledComponents.css)(["margin-top:6px;"])
-}, primaryText), (0, _primitiveGuards.isNil)(secondaryText) ? null : _react.default.createElement(_List.ListItemSecondaryText, {
+}, primaryText), (0, _typeGuards.isNil)(secondaryText) ? null : _react.default.createElement(_List.ListItemSecondaryText, {
   cssOverrides: (0, _styledComponents.css)(["margin-bottom:6px;"])
-}, secondaryText), meta), !(0, _primitiveGuards.isNil)(rightIcon) && _react.default.createElement(_List.ListItemGraphic, {
+}, secondaryText), meta), !(0, _typeGuards.isNil)(rightIcon) && _react.default.createElement(_List.ListItemGraphic, {
   icon: rightIcon,
   dense: dense
 }), children);
@@ -115,7 +116,7 @@ class ContextMenu extends _react.Component {
           to: item.link,
           onClick: onClick,
           tabIndex: 1,
-          meta: (0, _primitiveGuards.isNil)(item.icons) ? null : _react.default.createElement(MenuItemIconRow, null, item.icons)
+          meta: (0, _typeGuards.isNil)(item.icons) ? null : _react.default.createElement(MenuItemIconRow, null, item.icons)
         }));
         return items.length > 0 ? (0, _Option.some)([groupHeader, items]) : _Option.none;
       });
@@ -125,7 +126,7 @@ class ContextMenu extends _react.Component {
   componentDidUpdate(prevProps) {
     const searchRef = this.searchRef.current;
 
-    if (!(0, _primitiveGuards.isNil)(searchRef) && !prevProps.isOpen && this.props.isOpen) {
+    if (!(0, _typeGuards.isNil)(searchRef) && !prevProps.isOpen && this.props.isOpen) {
       window.setTimeout(() => searchRef.focus(), 50);
     }
   }
@@ -155,7 +156,7 @@ class ContextMenu extends _react.Component {
       return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(SearchContainer, null, _react.default.createElement(_Search.Search, {
         value: value,
         onChange: onChange,
-        cssOverrides: (0, _styledComponents.css)(["flex-grow:1;margin:12px;"]),
+        cssOverrides: (0, _styledComponents.css)(["flex-grow:1;margin:12px;flex-shrink:unset;"]),
         searchRef: this.searchRef
       }), renderFilter()), _react.default.createElement(_List.ListContainer, {
         cssOverrides: (0, _styledComponents.css)(["padding:0 0 4px;"]),
diff --git a/dist/sidebar/SideBarComponents.d.ts b/dist/sidebar/SideBarComponents.d.ts
index bf256e2ce..2eeb7f995 100644
--- a/dist/sidebar/SideBarComponents.d.ts
+++ b/dist/sidebar/SideBarComponents.d.ts
@@ -11,28 +11,16 @@ export declare enum SidebarContainerAnimationPose {
     Open = "open",
     Collapsed = "collapsed"
 }
-export declare const SidebarContainer: import("styled-components").StyledComponentClass<CommonComponentType & {
+export declare const SidebarContainer: import("styled-components").StyledComponent<React.ComponentType<any>, any, CommonComponentType & {
     pose: string;
-}, any, Pick<CommonComponentType & {
-    pose: string;
-}, "id" | "cssOverrides" | "className" | "as" | "tabIndex" | "pose"> & {
-    theme?: any;
-}>;
-export declare const SidebarMenuContainer: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
-export declare const SidebarMenuItemDropDownToggle: import("styled-components").StyledComponentClass<CommonComponentType & PopOverToggleProps & {
-    disabled?: boolean | undefined;
-    title: string;
-    subtitle?: string | undefined;
-    iconName: string;
-    isSideBarCollapsed: boolean;
-}, any, Pick<CommonComponentType & PopOverToggleProps & {
+}, never>;
+export declare const SidebarMenuContainer: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
+export declare const SidebarMenuItemDropDownToggle: import("styled-components").StyledComponent<({ title, subtitle, iconName, isOpen, cssOverrides, isSideBarCollapsed, ...otherProps }: any) => JSX.Element, any, CommonComponentType & PopOverToggleProps & {
     disabled?: boolean | undefined;
     title: string;
     subtitle?: string | undefined;
     iconName: string;
     isSideBarCollapsed: boolean;
-}, "title" | "id" | "isOpen" | "cssOverrides" | "className" | "onClick" | "as" | "tabIndex" | "disabled" | "isSideBarCollapsed" | "subtitle" | "iconName"> & {
-    theme?: any;
-}>;
-export declare const SidebarMenuContextRibbon: import("styled-components").StyledComponentClass<CommonComponentType, any, CommonComponentType & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
-export declare const SideBarMenuDivider: import("styled-components").StyledComponentClass<{}, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+}, never>;
+export declare const SidebarMenuContextRibbon: import("styled-components").StyledComponent<"div", any, CommonComponentType, never>;
+export declare const SideBarMenuDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
diff --git a/dist/sidebar/SideBarComponents.js b/dist/sidebar/SideBarComponents.js
index dae056b39..669e09700 100644
--- a/dist/sidebar/SideBarComponents.js
+++ b/dist/sidebar/SideBarComponents.js
@@ -15,6 +15,8 @@ var _List = require("../list/List");
 
 var _reactPose = _interopRequireDefault(require("react-pose"));
 
+var _zindex = require("../commonStyles/zindex");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -62,16 +64,18 @@ const SidebarContainer =
 })).withConfig({
   displayName: "SideBarComponents__SidebarContainer",
   componentId: "u2fke3-0"
-})(["", ";", ";background:#f4f4f7;box-sizing:border-box;flex-shrink:0;position:relative;z-index:5;will-change:width;&::after{background:linear-gradient( to right,rgba(0,0,0,0.1) 0px,rgba(0,0,0,0.1) 1px,rgba(0,0,0,0.05) 1px,rgba(0,0,0,0) 100% );bottom:0;content:'';position:absolute;right:-3px;top:0;width:3px;}"], (0, _CommonStyles.flexFlow)(), _CommonStyles.gothamFontFamily);
+})(["", ";", ";", ";background:#f4f4f7;box-sizing:border-box;flex-shrink:0;position:relative;will-change:width;&::after{background:linear-gradient( to right,rgba(0,0,0,0.1) 0px,rgba(0,0,0,0.1) 1px,rgba(0,0,0,0.05) 1px,rgba(0,0,0,0) 100% );bottom:0;content:'';position:absolute;right:-3px;top:0;width:3px;}"], (0, _CommonStyles.flexFlow)(), _CommonStyles.gothamFontFamily, (0, _zindex.zIndex)(_zindex.ZIndexNodeName.SidebarContainer));
 exports.SidebarContainer = SidebarContainer;
+
 const SidebarMenuContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "SideBarComponents__SidebarMenuContainer",
   componentId: "u2fke3-1"
-})(["", ";flex:1;overflow-y:auto;padding:0 8px;", ";"], (0, _CommonStyles.flexFlow)(), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";flex:1;overflow-y:auto;padding:0 8px;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
+
 exports.SidebarMenuContainer = SidebarMenuContainer;
 const SidebarMenuItemDropDownToggle =
 /*#__PURE__*/
@@ -94,29 +98,30 @@ const SidebarMenuItemDropDownToggle =
 }, subtitle)), _react.default.createElement(_List.ListItemGraphic, {
   icon: isOpen ? 'arrow_drop_up' : 'arrow_drop_down',
   cssOverrides: (0, _styledComponents.css)(["transform:translateX(", "px);transition:all ease 75ms,transform ", " ", "ms;"], isSideBarCollapsed ? -18 : 0, (0, _CommonStyles.ease)(isSideBarCollapsed), sideBarCollapsedTransitionDuration)
-}))).withConfig({
-  displayName: "SideBarComponents__SidebarMenuItemDropDownToggle",
-  componentId: "u2fke3-2"
-})(["", ";"], ({
+})))(({
   isOpen,
   isSideBarCollapsed,
   cssOverrides,
   disabled
-}) => (0, _styledComponents.css)(["", " background:", ";margin:0 8px 8px;border:1px solid ", ";color:", ";&:hover,&:active{background:", ";}&:hover{border-color:", ";}&:active{border-color:", ";color:", ";}&:active,&:active ", "{color:", ";}", "{", ";", ";}", ";"], disabled && _CommonStyles.baseDisabledStyles, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), isOpen ? (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700) : (0, _CommonStyles.colors)(_CommonStyles.Colors.White), isOpen ? (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700) : (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), !isOpen && (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple500), (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700), (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700), _List.ListItemGraphic, (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700), _List.ListItemText, (0, _CommonStyles.visible)(!isSideBarCollapsed), sideBarCollapsedTransition({
+}) => (0, _styledComponents.css)(["", ";background:", ";margin:0 8px 8px;border:1px solid ", ";color:", ";&:hover,&:active{background:", ";}&:hover{border-color:", ";}&:active{border-color:", ";color:", ";}&:active,&:active ", "{color:", ";}", "{", ";", ";}", ";"], disabled && _CommonStyles.baseDisabledStyles, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), isOpen ? (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700) : (0, _CommonStyles.colors)(_CommonStyles.Colors.White), isOpen ? (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700) : (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandDarkBlue), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), !isOpen && (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple500), (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700), (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700), _List.ListItemGraphic, (0, _CommonStyles.colors)(_CommonStyles.Colors.AccentPurple700), _List.ListItemText, (0, _CommonStyles.visible)(!isSideBarCollapsed), sideBarCollapsedTransition({
   isSideBarCollapsed
 }), cssOverrides));
 exports.SidebarMenuItemDropDownToggle = SidebarMenuItemDropDownToggle;
+
 const SidebarMenuContextRibbon =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "SideBarComponents__SidebarMenuContextRibbon",
-  componentId: "u2fke3-3"
+  componentId: "u2fke3-2"
 })(["", ";color:", ";"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title5, '12px 12px 13px 20px'), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black62));
+
 exports.SidebarMenuContextRibbon = SidebarMenuContextRibbon;
+
 const SideBarMenuDivider =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "SideBarComponents__SideBarMenuDivider",
-  componentId: "u2fke3-4"
+  componentId: "u2fke3-3"
 })(["background:#e2e4ea;height:1px;margin:15px 8px 16px;flex-shrink:0;"]);
+
 exports.SideBarMenuDivider = SideBarMenuDivider;
\ No newline at end of file
diff --git a/dist/sidebar/SidebarDropDown.d.ts b/dist/sidebar/SidebarDropDown.d.ts
index 1c920c8d5..e89135e13 100644
--- a/dist/sidebar/SidebarDropDown.d.ts
+++ b/dist/sidebar/SidebarDropDown.d.ts
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import { PopOverChildProps } from '@monorail/popOver/PopOver';
-import { BBCardBackgroundProps } from '@monorail/cards/Cards';
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
 declare type Props = PopOverChildProps & {
     width: number;
 };
@@ -13,7 +11,7 @@ export declare class SidebarDropDown extends Component<Props, State> {
         width: number;
     };
     state: State;
-    dropDownRef: React.RefObject<StyledHtmlElement<HTMLDivElement, BBCardBackgroundProps, unknown>>;
+    dropDownRef: React.RefObject<HTMLDivElement>;
     componentDidMount(): void;
     componentDidUpdate(): void;
     updateMenuHeight: () => void;
diff --git a/dist/sidebar/SidebarDropDown.js b/dist/sidebar/SidebarDropDown.js
index 53bc974d2..fdb25dc75 100644
--- a/dist/sidebar/SidebarDropDown.js
+++ b/dist/sidebar/SidebarDropDown.js
@@ -21,10 +21,10 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const DropDownContent =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "SidebarDropDown__DropDownContent",
   componentId: "sc-18l3je-0"
-})(["", ";"], ({
+})(({
   cssOverrides
 }) => (0, _styledComponents.css)(["", ";overflow:hidden;", ";"], (0, _CommonStyles.flexFlow)(), cssOverrides));
 
diff --git a/dist/status/Status.d.ts b/dist/status/Status.d.ts
index ea5e68ff4..31f6d28d6 100644
--- a/dist/status/Status.d.ts
+++ b/dist/status/Status.d.ts
@@ -1,11 +1,7 @@
-import React from 'react';
 import { CommonComponentType } from '@monorail/types';
 declare type Props = CommonComponentType & {
     size?: number;
     inactive?: boolean;
 };
-export declare const Status: import("styled-components").StyledComponentClass<Props, any, CommonComponentType & {
-    size?: number | undefined;
-    inactive?: boolean | undefined;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const Status: import("styled-components").StyledComponent<"div", any, Props, never>;
 export {};
diff --git a/dist/status/Status.js b/dist/status/Status.js
index 87f25fc6b..a1dbc2573 100644
--- a/dist/status/Status.js
+++ b/dist/status/Status.js
@@ -13,12 +13,13 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const Status =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Status",
   componentId: "kuxbp5-0"
-})(["", ";"], ({
+})(({
   cssOverrides,
   size = 16,
   inactive = false
 }) => (0, _styledComponents.css)(["background:", ";background:", ";border-radius:", "px;color:", ";flex-shrink:0;font-size:", "px;font-weight:700;height:", "px;min-width:", "px;padding:0 ", "px;text-align:center;line-height:", "px;display:inline-block;", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), (0, _CommonStyles.colors)(inactive ? _CommonStyles.Colors.Black54 : _CommonStyles.Colors.BrandLightBlue), size / 2, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), size - 5, size, size, size / 4, size, cssOverrides));
+
 exports.Status = Status;
\ No newline at end of file
diff --git a/dist/stepper/HorizontalStepper.d.ts b/dist/stepper/HorizontalStepper.d.ts
index 4c83e6123..2f177aff6 100644
--- a/dist/stepper/HorizontalStepper.d.ts
+++ b/dist/stepper/HorizontalStepper.d.ts
@@ -10,7 +10,7 @@ declare type Props = {
     onStepClick: (step: StepType, index: number) => void;
 };
 export declare class HorizontalStepper extends Component<Props & StyleOptions> {
-    getClassname: (step: StepType) => "" | "active" | "completed" | "disabled";
+    getClassname: (step: StepType) => "" | "active" | "disabled" | "completed";
     renderSection: (step: StepType, index: number) => JSX.Element;
     render(): JSX.Element;
 }
diff --git a/dist/stepper/HorizontalStepper.js b/dist/stepper/HorizontalStepper.js
index 0a877800d..ed2db5c2d 100644
--- a/dist/stepper/HorizontalStepper.js
+++ b/dist/stepper/HorizontalStepper.js
@@ -7,81 +7,101 @@ exports.HorizontalStepper = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _Icon = require("../icon/Icon");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 const HorizontalStepperContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__HorizontalStepperContainer",
   componentId: "sc-1nopkhd-0"
-})(["display:flex;height:100%;width:100%;justify-content:center;", ";"], ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["display:flex;height:100%;width:100%;justify-content:center;"]));
+
 const Step =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Step",
   componentId: "sc-1nopkhd-1"
 })(["align-items:center;display:flex;justify-content:center;position:relative;max-width:180px;transition:all ease 0.25s;cursor:pointer;&:hover{opacity:0.7;}&.disabled{opacity:0.4;pointer-events:none;}&.active{opacity:1;.number{background-color:#1465ff;border-color:#1465ff;.digit{color:white;}}}&.completed{.number{background-color:", ";border-color:", ";svg{fill:", ";}}}"], props => props.darkMode ? 'white' : '#f7f7f7', props => props.darkMode ? 'white' : '#1465ff', props => props.darkMode ? 'hsla(234,56%,20%,1)' : '#1465ff');
+
 const Body =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Body",
   componentId: "sc-1nopkhd-2"
 })(["align-items:center;display:flex;z-index:1;padding:10px;overflow:hidden;"]);
+
 const NumberWrapper =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__NumberWrapper",
   componentId: "sc-1nopkhd-3"
-})(["padding:10px;position:relative;background-color:", ";.icon{position:absolute;left:5px;top:5px;svg{fill:#1465ff;}}"], props => props.darkMode ? 'hsla(234,56%,20%,1)' : 'white');
+})(({
+  darkMode
+}) => (0, _styledComponents.css)(["padding:10px;position:relative;background-color:", ";.icon{position:absolute;left:5px;top:5px;svg{fill:#1465ff;}}"], darkMode ? 'hsla(234,56%,20%,1)' : 'white'));
+
 const Number =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Number",
   componentId: "sc-1nopkhd-4"
-})(["border-style:solid;border-width:2px;border-color:", ";align-items:center;border-radius:50%;width:25px;height:25px;position:relative;"], props => props.darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)'); // Needed to have this because otherwise
+})(({
+  darkMode
+}) => (0, _styledComponents.css)(["border-style:solid;border-width:2px;border-color:", ";align-items:center;border-radius:50%;width:25px;height:25px;position:relative;"], darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)')); // Needed to have this because otherwise
 // the number would bounce around when
 // swapping between checkmark and digit
 
+
 const Digit =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Digit",
   componentId: "sc-1nopkhd-5"
-})(["color:", ";font-weight:bold;position:absolute;justify-content:center;align-items:center;height:100%;width:100%;display:flex;"], props => props.darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)');
+})(({
+  darkMode
+}) => (0, _styledComponents.css)(["color:", ";font-weight:bold;position:absolute;justify-content:center;align-items:center;height:100%;width:100%;display:flex;"], darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)'));
+
 const Text =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Text",
   componentId: "sc-1nopkhd-6"
-})(["display:flex;flex-direction:column;background-color:", ";padding-right:10px;"], props => props.darkMode ? 'hsla(234,56%,20%,1)' : 'white');
+})(({
+  darkMode
+}) => (0, _styledComponents.css)(["display:flex;flex-direction:column;background-color:", ";padding-right:10px;"], darkMode ? 'hsla(234,56%,20%,1)' : 'white'));
+
 const Title =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Title",
   componentId: "sc-1nopkhd-7"
-})(["color:", ";font-size:13px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], props => props.darkMode ? 'white' : 'black');
+})(({
+  darkMode
+}) => (0, _styledComponents.css)(["color:", ";font-size:13px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], darkMode ? 'white' : 'black'));
+
 const Subtitle =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Subtitle",
   componentId: "sc-1nopkhd-8"
-})(["color:", ";font-size:11px;opacity:0.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], props => props.darkMode ? 'white' : 'black');
+})(({
+  darkMode
+}) => (0, _styledComponents.css)(["color:", ";font-size:11px;opacity:0.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], darkMode ? 'white' : 'black'));
+
 const Line =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "HorizontalStepper__Line",
   componentId: "sc-1nopkhd-9"
 })(["height:1px;width:50%;background-color:#c4c4c4;top:50%;position:absolute;"]);
+
 const LeftLine =
 /*#__PURE__*/
 (0, _styledComponents.default)(Line).withConfig({
@@ -136,7 +156,7 @@ class HorizontalStepper extends _react.Component {
       darkMode: this.props.darkMode
     }, _react.default.createElement(Title, {
       darkMode: this.props.darkMode
-    }, step.label), !(0, _primitiveGuards.isNil)(step.subtitle) && _react.default.createElement(Subtitle, {
+    }, step.label), !(0, _typeGuards.isNil)(step.subtitle) && _react.default.createElement(Subtitle, {
       darkMode: this.props.darkMode
     }, step.subtitle))), index !== 0 && _react.default.createElement(LeftLine, null), index !== this.props.steps.length - 1 && _react.default.createElement(RightLine, null));
   }
diff --git a/dist/tabs/Tab.d.ts b/dist/tabs/Tab.d.ts
index 66c1f8ff2..ea8ef4f96 100644
--- a/dist/tabs/Tab.d.ts
+++ b/dist/tabs/Tab.d.ts
@@ -1,7 +1,6 @@
 import React, { Component, MouseEvent } from 'react';
 import { LinkProps } from '@monorail/list/List';
 import { CommonComponentType } from '@monorail/types';
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level';
 declare type CCTabProps = CommonComponentType & LinkProps & {
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
     isActive: boolean;
@@ -17,7 +16,7 @@ export declare class Tab extends Component<TabProps> {
         setIndicator: () => void;
         updateIsActive: () => void;
     };
-    tabRef: React.RefObject<StyledHtmlElement<HTMLDivElement, CCTabProps, unknown>>;
+    tabRef: React.RefObject<HTMLDivElement>;
     componentDidMount(): void;
     componentDidUpdate(prevProps: TabProps): void;
     callSetIndicator: () => void;
diff --git a/dist/tabs/Tab.js b/dist/tabs/Tab.js
index aba9d1a33..75d8e8b2c 100644
--- a/dist/tabs/Tab.js
+++ b/dist/tabs/Tab.js
@@ -13,22 +13,20 @@ var _reactRouter = require("react-router");
 
 var _CommonStyles = require("../CommonStyles");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 const CCTab =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Tab__CCTab",
   componentId: "vx48hj-0"
-})(["", ";", ";align-items:center;color:", ";cursor:pointer;min-height:24px;padding:0 8px;text-transform:uppercase;user-select:none;&:hover,&:focus{text-decoration:none;}&:hover{background:", ";}&:active{background:", ";}", ";", ";"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.08), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.16), (0, _CommonStyles.baseFocusStyles)(), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";align-items:center;color:", ";cursor:pointer;min-height:24px;padding:0 8px;text-transform:uppercase;user-select:none;&:hover,&:focus{text-decoration:none;}&:hover{background:", ";}&:active{background:", ";}", ";", ";"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.08), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue, 0.16), (0, _CommonStyles.baseFocusStyles)(), cssOverrides));
 
 class Tab extends _react.Component {
   constructor(...args) {
@@ -42,8 +40,8 @@ class Tab extends _react.Component {
         as
       } = this.props;
 
-      if (isActive && !(0, _primitiveGuards.isNil)(this.tabRef.current)) {
-        if ((0, _primitiveGuards.isNil)(as)) {
+      if (isActive && !(0, _typeGuards.isNil)(this.tabRef.current)) {
+        if ((0, _typeGuards.isNil)(as)) {
           setIndicator(this.tabRef.current.offsetWidth, this.tabRef.current.offsetLeft);
         } else if (as === _reactRouter.Link) {
           const tabLinkRef = (0, _reactDom.findDOMNode)(this.tabRef.current);
@@ -59,11 +57,11 @@ class Tab extends _react.Component {
         index
       } = this.props;
 
-      if (!(0, _primitiveGuards.isNil)(updateIsActive) && !(0, _primitiveGuards.isNil)(index)) {
+      if (!(0, _typeGuards.isNil)(updateIsActive) && !(0, _typeGuards.isNil)(index)) {
         updateIsActive(index);
       }
 
-      if (!(0, _primitiveGuards.isNil)(onClick)) {
+      if (!(0, _typeGuards.isNil)(onClick)) {
         onClick(event);
       }
     };
diff --git a/dist/tabs/TabBar.d.ts b/dist/tabs/TabBar.d.ts
index 623781460..531351d8a 100644
--- a/dist/tabs/TabBar.d.ts
+++ b/dist/tabs/TabBar.d.ts
@@ -2,7 +2,7 @@ import React, { Component, ReactNode } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 import { Sizes } from '@monorail/CommonStyles';
 import { TabProps } from './Tab';
-export declare const TabBarContainer: import("styled-components").StyledComponentClass<CCTabBarProps, any, CCTabBarProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const TabBarContainer: import("styled-components").StyledComponent<"div", any, CCTabBarProps, never>;
 declare type CCTabBarProps = {
     cssOverrides?: SimpleInterpolation;
     size: Sizes;
diff --git a/dist/tabs/TabBar.js b/dist/tabs/TabBar.js
index 77ee3073a..999c22250 100644
--- a/dist/tabs/TabBar.js
+++ b/dist/tabs/TabBar.js
@@ -7,7 +7,7 @@ exports.TabBar = exports.TabBarContainer = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -18,25 +18,26 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 // TabBarIndicator is pos:abs to this element. Also we use offsetLeft on the Tab which references this position.
 const TabBarContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "TabBar__TabBarContainer",
   componentId: "sc-1hr19pz-0"
-})(["", ";height:", "px;padding:0 8px;position:relative;box-sizing:border-box;border-bottom:1px solid ", ";flex-shrink:0;", ";"], (0, _CommonStyles.flexFlow)('row'), ({
+})(({
+  cssOverrides,
   size
-}) => size, (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94), ({
-  cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";height:", "px;padding:0 8px;position:relative;box-sizing:border-box;border-bottom:1px solid ", ";flex-shrink:0;", ";"], (0, _CommonStyles.flexFlow)('row'), size, (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey94), cssOverrides));
+
 exports.TabBarContainer = TabBarContainer;
+
 const TabBarIndicator =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "TabBar__TabBarIndicator",
   componentId: "sc-1hr19pz-1"
-})(["", ";background:", ";border-radius:3px 3px 0 0;bottom:0;height:3px;position:absolute;transition-property:all;transition-timing-function:ease-in-out;"], ({
+})(({
   left,
   width,
   duration
-}) => (0, _styledComponents.css)(["left:", "px;width:", "px;transition-duration:", "ms;"], left, width, duration * 1.4), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue));
+}) => (0, _styledComponents.css)(["background:", ";border-radius:3px 3px 0 0;bottom:0;height:3px;left:", "px;position:absolute;transition-duration:", "ms;transition-property:all;transition-timing-function:ease-in-out;width:", "px;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), left, duration * 1.4, width));
 
 const TabBarActions =
 /*#__PURE__*/
@@ -100,11 +101,11 @@ class TabBar extends _react.Component {
      * automatic updates on Tab click.
      */
 
-    return _react.default.Children.map(children, (child, index) => !(0, _primitiveGuards.isNil)(child) && _react.default.isValidElement(child) && _react.default.cloneElement(child, {
+    return _react.default.Children.map(children, (child, index) => !(0, _typeGuards.isNil)(child) && _react.default.isValidElement(child) && _react.default.cloneElement(child, {
       index,
       isActive: index === activeTabIndex,
       setIndicator: this.setIndicator,
-      updateIsActive: (0, _primitiveGuards.isNil)(this.props.activeTabIndex) ? this.updateActiveTab : undefined
+      updateIsActive: (0, _typeGuards.isNil)(this.props.activeTabIndex) ? this.updateActiveTab : undefined
     }));
   }
 
@@ -122,7 +123,7 @@ class TabBar extends _react.Component {
     return _react.default.createElement(TabBarContainer, {
       cssOverrides: cssOverrides,
       size: size
-    }, this.renderTabs(), !(0, _primitiveGuards.isNil)(actions) && _react.default.createElement(TabBarActions, {
+    }, this.renderTabs(), !(0, _typeGuards.isNil)(actions) && _react.default.createElement(TabBarActions, {
       id: "tabBarActions"
     }, actions), _react.default.createElement(TabBarIndicator, {
       width: indicatorWidth,
diff --git a/dist/tags/Tag.d.ts b/dist/tags/Tag.d.ts
index a003b312c..190ee20f3 100644
--- a/dist/tags/Tag.d.ts
+++ b/dist/tags/Tag.d.ts
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { SimpleInterpolation } from 'styled-components';
 declare type CCTagProps = {
     cssOverrides?: SimpleInterpolation;
     label?: string;
 };
-export declare const CCTag: import("styled-components").StyledComponentClass<CCTagProps, any, CCTagProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const CCTag: import("styled-components").StyledComponent<"div", any, CCTagProps, never>;
 declare type TagProps = CCTagProps & {
     icon: string;
     key?: string | number;
diff --git a/dist/tags/Tag.js b/dist/tags/Tag.js
index 3c375f496..96191cda3 100644
--- a/dist/tags/Tag.js
+++ b/dist/tags/Tag.js
@@ -13,7 +13,7 @@ var _Icon = require("../icon/Icon");
 
 var _CommonStyles = require("../CommonStyles");
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
@@ -21,16 +21,17 @@ const tagHeight = 24;
 const circleWidth = tagHeight - 4;
 const circleRadius = circleWidth / 2;
 const iconSize = tagHeight / 2;
+
 const CCTag =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Tag__CCTag",
   componentId: "rxfsom-0"
-})(["", ";", ";display:inline-flex;align-items:center;background:", ";border-radius:", "px;height:", "px;position:relative;text-transform:uppercase;user-select:none;&::before{background:", ";border-radius:", "px;bottom:2px;content:'';left:2px;position:absolute;top:2px;width:", "px;}", ";"], ({
-  label
-}) => (0, _primitiveGuards.isNil)(label) && (0, _styledComponents.css)(["width:", "px;"], tagHeight), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.07), tagHeight / 2, tagHeight, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), circleRadius, circleWidth, ({
+})(({
+  label,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";display:inline-flex;align-items:center;background:", ";border-radius:", "px;height:", "px;position:relative;text-transform:uppercase;user-select:none;&::before{background:", ";border-radius:", "px;bottom:2px;content:'';left:2px;position:absolute;top:2px;width:", "px;}", ";"], (0, _typeGuards.isNil)(label) && (0, _styledComponents.css)(["width:", "px;"], tagHeight), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.07), tagHeight / 2, tagHeight, (0, _CommonStyles.colors)(_CommonStyles.Colors.White), circleRadius, circleWidth, cssOverrides));
+
 exports.CCTag = CCTag;
 const StyledIconLeft =
 /*#__PURE__*/
@@ -38,9 +39,10 @@ const StyledIconLeft =
   displayName: "Tag__StyledIconLeft",
   componentId: "rxfsom-1"
 })(["color:", ";margin:0 ", "px;position:relative;"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), iconSize / 2);
+
 const Title =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "Tag__Title",
   componentId: "rxfsom-2"
 })(["", ";color:", ";margin:0 10px 0 2px;"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Content), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89));
diff --git a/dist/tile/Tile.d.ts b/dist/tile/Tile.d.ts
index 5a52f80fb..9d0f962d9 100644
--- a/dist/tile/Tile.d.ts
+++ b/dist/tile/Tile.d.ts
@@ -1,8 +1,4 @@
-/// <reference path="../../src/typings/cssprop.d.ts" />
-/// <reference types="react" />
 import { CommonComponentType } from '@monorail/types';
-export declare const Tile: import("styled-components").StyledComponentClass<CommonComponentType & {
+export declare const Tile: import("styled-components").StyledComponent<"div", any, CommonComponentType & {
     direction?: "column" | "row" | undefined;
-}, any, CommonComponentType & {
-    direction?: "column" | "row" | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+}, never>;
diff --git a/dist/tile/Tile.js b/dist/tile/Tile.js
index b39aac674..f2ebef48b 100644
--- a/dist/tile/Tile.js
+++ b/dist/tile/Tile.js
@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tile = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _CommonStyles = require("../CommonStyles");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 const Tile =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Tile",
   componentId: "tepisb-0"
-})(["", ";", ";background:", ";border:1px solid ", ";box-sizing:border-box;flex-shrink:0;justify-content:space-between;", ";"], ({
-  direction = 'column'
-}) => (0, _CommonStyles.flexFlow)(direction), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Medium), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey96), ({
+})(({
+  direction = 'column',
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";background:", ";border:1px solid ", ";box-sizing:border-box;flex-shrink:0;justify-content:space-between;", ";"], (0, _CommonStyles.flexFlow)(direction), (0, _CommonStyles.borderRadius)(_CommonStyles.BorderRadius.Medium), (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.Grey96), cssOverrides));
+
 exports.Tile = Tile;
\ No newline at end of file
diff --git a/dist/toggle/Overlay.d.ts b/dist/toggle/Overlay.d.ts
index 74f272ca4..37b49f17f 100644
--- a/dist/toggle/Overlay.d.ts
+++ b/dist/toggle/Overlay.d.ts
@@ -6,11 +6,13 @@ declare type Props = Omit<PopOverChildProps, 'position'> & {
     overlayProps?: Omit<BBModalOverlayProps, 'isOpen' | 'onClick'>;
     escToClose: boolean;
     usesScaleAnimation: boolean;
+    zIndex: number;
 };
 export declare class Overlay extends Component<Props> {
     static defaultProps: {
         usesScaleAnimation: boolean;
         escToClose: boolean;
+        zIndex: number;
     };
     componentDidMount(): void;
     componentWillUnmount(): void;
diff --git a/dist/toggle/Overlay.js b/dist/toggle/Overlay.js
index 9ed43a192..42701e806 100644
--- a/dist/toggle/Overlay.js
+++ b/dist/toggle/Overlay.js
@@ -56,16 +56,18 @@ class Overlay extends _react.Component {
 
   render() {
     const {
+      children,
       isOpen,
       onClick,
-      children,
       overlayProps,
-      usesScaleAnimation
+      usesScaleAnimation,
+      zIndex
     } = this.props;
     return _react.default.createElement(_Modals.BBModalContainer, {
       onClick: e => e.stopPropagation(),
       usesScaleAnimation: usesScaleAnimation,
-      isOpen: isOpen
+      isOpen: isOpen,
+      zIndex: zIndex
     }, _react.default.createElement(_Modals.BBModalOverlay, _extends({
       isOpen: isOpen,
       onClick: onClick
@@ -77,5 +79,6 @@ class Overlay extends _react.Component {
 exports.Overlay = Overlay;
 Overlay.defaultProps = {
   usesScaleAnimation: false,
-  escToClose: true
+  escToClose: true,
+  zIndex: 9998
 };
\ No newline at end of file
diff --git a/dist/toggle/Toggle.d.ts b/dist/toggle/Toggle.d.ts
index 5020db143..bb61601cc 100644
--- a/dist/toggle/Toggle.d.ts
+++ b/dist/toggle/Toggle.d.ts
@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { ToggleSize } from '@monorail/toggle/toggleTypes';
 import { SimpleInterpolation } from 'styled-components';
-export declare const Slider: import("styled-components").StyledComponentClass<Slider, any, Slider & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const Slider: import("styled-components").StyledComponent<"div", any, Slider, never>;
 declare type Slider = {
     toggleSize: ToggleSize;
 };
diff --git a/dist/toggle/Toggle.js b/dist/toggle/Toggle.js
index f220a881d..c36e8c1f5 100644
--- a/dist/toggle/Toggle.js
+++ b/dist/toggle/Toggle.js
@@ -40,69 +40,64 @@ const iconSizeCss = {
   [_toggleTypes.ToggleSize.Large]: (0, _styledComponents.css)(["font-size:", "px;"], iconSize * 1.5),
   [_toggleTypes.ToggleSize.Xlarge]: (0, _styledComponents.css)(["font-size:", "px;"], iconSize * 2)
 };
+
 const CCToggle =
 /*#__PURE__*/
-(0, _styledComponents.default)('label').withConfig({
+_styledComponents.default.label.withConfig({
   displayName: "Toggle__CCToggle",
   componentId: "sc-14ermjw-0"
-})(["", ";box-sizing:content-box;cursor:pointer;display:inline-block;position:relative;transition:all ease-in 150ms;", ";", ";"], ({
-  toggleSize
-}) => toggleSizeCss[toggleSize], ({
-  checked
-}) => checked ? (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)) : (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.06)), ({
+})(({
+  toggleSize,
+  checked,
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";box-sizing:content-box;cursor:pointer;display:inline-block;position:relative;transition:all ease-in 150ms;", ";", ";"], toggleSizeCss[toggleSize], checked ? (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)) : (0, _styledComponents.css)(["background-color:", ";border-color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black, 0.06)), cssOverrides));
+
 const StyledIconChecked =
 /*#__PURE__*/
 (0, _styledComponents.default)(({
   checked,
   toggleSize,
   ...otherProps
-}) => _react.default.createElement(_Icon.Icon, otherProps)).withConfig({
-  displayName: "Toggle__StyledIconChecked",
-  componentId: "sc-14ermjw-1"
-})(["", ";", ";color:", ";position:absolute;transition:all ease-in 75ms;"], ({
-  toggleSize
-}) => iconSizeCss[toggleSize], ({
+}) => _react.default.createElement(_Icon.Icon, otherProps))(({
+  toggleSize,
   checked
-}) => (0, _CommonStyles.visible)(checked), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue));
+}) => (0, _styledComponents.css)(["", ";", ";color:", ";position:absolute;transition:all ease-in 75ms;"], iconSizeCss[toggleSize], (0, _CommonStyles.visible)(checked), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)));
 const StyledIconNotChecked =
 /*#__PURE__*/
 (0, _styledComponents.default)(({
   checked,
   toggleSize,
   ...otherProps
-}) => _react.default.createElement(_Icon.Icon, otherProps)).withConfig({
-  displayName: "Toggle__StyledIconNotChecked",
-  componentId: "sc-14ermjw-2"
-})(["", ";", ";color:", ";position:absolute;transition:all ease-in 75ms;"], ({
+}) => _react.default.createElement(_Icon.Icon, otherProps))(({
+  checked,
   toggleSize
-}) => iconSizeCss[toggleSize], ({
-  checked
-}) => (0, _CommonStyles.visible)(!checked), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black24));
+}) => (0, _styledComponents.css)(["", ";", ";color:", ";position:absolute;transition:all ease-in 75ms;"], iconSizeCss[toggleSize], (0, _CommonStyles.visible)(!checked), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black24)));
+
 const Slider =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Toggle__Slider",
-  componentId: "sc-14ermjw-3"
-})(["", ";", ";", ";background-color:", ";border-radius:50%;bottom:0;content:'';left:0;justify-content:center;align-items:center;transition:all ease-in 75ms;"], ({
+  componentId: "sc-14ermjw-1"
+})(({
   toggleSize
-}) => sliderSizeCss[toggleSize], (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation1), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.White));
+}) => (0, _styledComponents.css)(["", ";", ";", ";background-color:", ";border-radius:50%;bottom:0;content:'';left:0;justify-content:center;align-items:center;transition:all ease-in 75ms;"], sliderSizeCss[toggleSize], (0, _CommonStyles.getElevation)(_CommonStyles.ElevationRange.Elevation1), (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.colors)(_CommonStyles.Colors.White)));
+
 exports.Slider = Slider;
+
 const Input =
 /*#__PURE__*/
-(0, _styledComponents.default)('input').withConfig({
+_styledComponents.default.input.withConfig({
   displayName: "Toggle__Input",
-  componentId: "sc-14ermjw-4"
-})(["display:none;&:checked + ", "{", ";}&:checked + ", " > ", "{", ";color:", ";}"],
-/* sc-selector */
-Slider, ({
+  componentId: "sc-14ermjw-2"
+})(({
   toggleSize
-}) => inputSizeCss[toggleSize],
+}) => (0, _styledComponents.css)(["display:none;&:checked + ", "{", ";}&:checked + ", " > ", "{", ";color:", ";}"],
+/* sc-selector */
+Slider, inputSizeCss[toggleSize],
 /* sc-selector */
 Slider,
 /* sc-selector */
-StyledIconChecked, (0, _CommonStyles.visible)(false), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue));
+StyledIconChecked, (0, _CommonStyles.visible)(false), (0, _CommonStyles.colors)(_CommonStyles.Colors.BrandLightBlue)));
 
 class Toggle extends _react.Component {
   render() {
diff --git a/dist/typography/Details.js b/dist/typography/Details.js
index feb62216e..87e26ddde 100644
--- a/dist/typography/Details.js
+++ b/dist/typography/Details.js
@@ -7,7 +7,7 @@ exports.CCDetails = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _primitiveGuards = require("../CoreUtils/primitive-guards");
+var _typeGuards = require("../sharedHelpers/typeGuards");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -27,15 +27,17 @@ const compactPropertyStyles =
 const largePropertyStyles =
 /*#__PURE__*/
 (0, _styledComponents.css)(["", ";color:", ";"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Content), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74));
+
 const BBDetailsProperty =
 /*#__PURE__*/
-(0, _styledComponents.default)('h2').withConfig({
+_styledComponents.default.h2.withConfig({
   displayName: "Details__BBDetailsProperty",
   componentId: "xo061-0"
-})(["", ";", ";margin:0;"], ({
+})(({
   compact,
-  large
-}) => {
+  large,
+  darkMode
+}) => (0, _styledComponents.css)(["", ";", ";margin:0;"], () => {
   if (compact) {
     return compactPropertyStyles;
   } else if (large) {
@@ -43,9 +45,8 @@ const BBDetailsProperty =
   } else {
     return primaryPropertyStyles;
   }
-}, ({
-  darkMode
-}) => darkMode && (0, _styledComponents.css)(["color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White))); // Value Styles
+}, darkMode && (0, _styledComponents.css)(["color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White)))); // Value Styles
+
 
 const primaryValueStyles =
 /*#__PURE__*/
@@ -56,15 +57,17 @@ const compactValueStyles =
 const largeValueStyles =
 /*#__PURE__*/
 (0, _styledComponents.css)(["", ";color:", ";"], (0, _CommonStyles.typography)(200, _CommonStyles.FontSizes.Title1), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black89));
+
 const BBDetailsValue =
 /*#__PURE__*/
-(0, _styledComponents.default)('h2').withConfig({
+_styledComponents.default.h2.withConfig({
   displayName: "Details__BBDetailsValue",
   componentId: "xo061-1"
-})(["", ";", ";margin:0;"], ({
+})(({
   compact,
-  large
-}) => {
+  large,
+  darkMode
+}) => (0, _styledComponents.css)(["", ";", ";margin:0;"], () => {
   if (compact) {
     return compactValueStyles;
   } else if (large) {
@@ -72,17 +75,16 @@ const BBDetailsValue =
   } else {
     return primaryValueStyles;
   }
-}, ({
-  darkMode
-}) => darkMode && (0, _styledComponents.css)(["color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White)));
+}, darkMode && (0, _styledComponents.css)(["color:", ";"], (0, _CommonStyles.colors)(_CommonStyles.Colors.White))));
+
 const BBDetailsContainer =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "Details__BBDetailsContainer",
   componentId: "xo061-2"
-})(["", ";", "{margin-top:6px;}", ";"], (0, _CommonStyles.flexFlow)(), _Tag.CCTag, ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", "{margin-top:6px;}", ";"], (0, _CommonStyles.flexFlow)(), _Tag.CCTag, cssOverrides));
 
 class CCDetails extends _react.Component {
   render() {
@@ -101,7 +103,7 @@ class CCDetails extends _react.Component {
       compact: compact,
       large: large,
       darkMode: darkMode
-    }, property), !(0, _primitiveGuards.isNil)(value) && _react.default.createElement(BBDetailsValue, {
+    }, property), !(0, _typeGuards.isNil)(value) && _react.default.createElement(BBDetailsValue, {
       compact: compact,
       large: large,
       darkMode: darkMode
diff --git a/dist/typography/SectionHeader.d.ts b/dist/typography/SectionHeader.d.ts
index 2ae65c62a..aa0489d18 100644
--- a/dist/typography/SectionHeader.d.ts
+++ b/dist/typography/SectionHeader.d.ts
@@ -1,10 +1,7 @@
 import { Component } from 'react';
-import { SimpleInterpolation } from 'styled-components';
 import { AppName } from '@monorail/CommonStyles';
-declare type CCSectionHeaderProps = {
-    cssOverrides?: SimpleInterpolation;
-};
-declare type SectionHeaderProps = CCSectionHeaderProps & {
+import { CommonComponentType } from '@monorail/types';
+declare type SectionHeaderProps = CommonComponentType & {
     iconLeft?: string | AppName;
     iconRight?: string | AppName;
     title: string;
diff --git a/dist/typography/SectionHeader.js b/dist/typography/SectionHeader.js
index cceb909cc..ae7b7c87a 100644
--- a/dist/typography/SectionHeader.js
+++ b/dist/typography/SectionHeader.js
@@ -19,18 +19,20 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const CCSectionHeader =
 /*#__PURE__*/
-(0, _styledComponents.default)('div').withConfig({
+_styledComponents.default.div.withConfig({
   displayName: "SectionHeader__CCSectionHeader",
   componentId: "jqmo3c-0"
-})(["", " align-items:center;flex-shrink:0;height:40px;padding:0 16px;", " color:", ";", ";"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74), ({
+})(({
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", " align-items:center;color:", ";flex-shrink:0;height:40px;padding:0 16px;", ";"], (0, _CommonStyles.flexFlow)('row'), (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74), cssOverrides));
+
 const Title =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "SectionHeader__Title",
   componentId: "jqmo3c-1"
 })(["", " color:", ";flex:1;"], (0, _CommonStyles.typography)(700, _CommonStyles.FontSizes.Title5), (0, _CommonStyles.colors)(_CommonStyles.Colors.Black74));
+
 const iconLeftStyle =
 /*#__PURE__*/
 (0, _styledComponents.css)(["margin-right:8px;"]);
@@ -50,10 +52,6 @@ const StyledIconRight =
   componentId: "jqmo3c-3"
 })(["", ";"], iconRightStyle);
 
-function isAppName(iconName) {
-  return Object.values(_CommonStyles.AppName).includes(iconName);
-}
-
 class SectionHeader extends _react.Component {
   render() {
     const {
@@ -65,12 +63,12 @@ class SectionHeader extends _react.Component {
     } = this.props;
     return _react.default.createElement(CCSectionHeader, {
       cssOverrides: cssOverrides
-    }, iconLeft && (isAppName(iconLeft) ? _react.default.createElement(_AppIcon.AppIcon, {
+    }, iconLeft && ((0, _CommonStyles.isAppName)(iconLeft) ? _react.default.createElement(_AppIcon.AppIcon, {
       appName: iconLeft,
       cssOverrides: iconLeftStyle
     }) : _react.default.createElement(StyledIconLeft, {
       icon: iconLeft
-    })), _react.default.createElement(Title, null, title), iconRight && (isAppName(iconRight) ? _react.default.createElement(_AppIcon.AppIcon, {
+    })), _react.default.createElement(Title, null, title), iconRight && ((0, _CommonStyles.isAppName)(iconRight) ? _react.default.createElement(_AppIcon.AppIcon, {
       appName: iconRight,
       cssOverrides: iconRightStyle
     }) : _react.default.createElement(StyledIconRight, {
diff --git a/dist/typography/Typography.d.ts b/dist/typography/Typography.d.ts
index 0dced3e7f..631c9c233 100644
--- a/dist/typography/Typography.d.ts
+++ b/dist/typography/Typography.d.ts
@@ -1,4 +1,2 @@
-/// <reference path="../../src/typings/cssprop.d.ts" />
-/// <reference types="react" />
 import { CommonComponentType, TypographyComponent } from '@monorail/types';
-export declare const SectionTitle: import("styled-components").StyledComponentClass<CommonComponentType & TypographyComponent, any, CommonComponentType & TypographyComponent & import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement>>;
+export declare const SectionTitle: import("styled-components").StyledComponent<"h1", any, CommonComponentType & TypographyComponent, never>;
diff --git a/dist/typography/Typography.js b/dist/typography/Typography.js
index d2ab3c417..2df404b59 100644
--- a/dist/typography/Typography.js
+++ b/dist/typography/Typography.js
@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SectionTitle = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _CommonStyles = require("../CommonStyles");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 const SectionTitle =
 /*#__PURE__*/
-(0, _styledComponents.default)('h1').withConfig({
+_styledComponents.default.h1.withConfig({
   displayName: "Typography__SectionTitle",
   componentId: "b9mi7x-0"
-})(["", ";", ";"], ({
-  margin = '16px'
-}) => (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title3, margin), ({
+})(({
+  margin = '16px',
   cssOverrides
-}) => cssOverrides);
+}) => (0, _styledComponents.css)(["", ";", ";"], (0, _CommonStyles.typography)(500, _CommonStyles.FontSizes.Title3, margin), cssOverrides));
+
 exports.SectionTitle = SectionTitle;
\ No newline at end of file
diff --git a/package.json b/package.json
index 8e4722877..532e1befb 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@simspace/monorail",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "SimSpace Design System",
   "resolutions": {
-    "@types/react": "16.8.2",
-    "@types/react-dom": "16.8.0",
-    "fp-ts": "1.13.0",
-    "monocle-ts": "1.5.3"
+    "@types/react": "16.8.10",
+    "@types/react-dom": "16.8.3",
+    "fp-ts": "1.15.0",
+    "lodash": "4.17.11",
+    "monocle-ts": "1.7.1"
   },
   "engines": {
     "node": "10.15.1"
@@ -31,42 +32,44 @@
   "homepage": "https://github.com/Simspace/monorail#readme",
   "dependencies": {},
   "peerDependencies": {
-    "fp-ts": "^1.13.0",
+    "fp-ts": "1.15.0",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-router": "^3.2.0",
     "styled-components": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.1.2",
-    "@babel/core": "7.1.2",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/plugin-proposal-decorators": "7.1.2",
-    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
-    "@babel/plugin-transform-react-constant-elements": "7.0.0",
-    "@babel/plugin-transform-react-inline-elements": "7.0.0",
-    "@babel/preset-env": "7.1.0",
+    "@babel/cli": "7.2.3",
+    "@babel/core": "7.3.4",
+    "@babel/plugin-proposal-class-properties": "7.3.4",
+    "@babel/plugin-proposal-decorators": "7.3.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.3.4",
+    "@babel/plugin-transform-react-constant-elements": "7.2.0",
+    "@babel/plugin-transform-react-inline-elements": "7.2.0",
+    "@babel/preset-env": "7.3.4",
     "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "7.1.0",
+    "@babel/preset-typescript": "7.3.3",
     "@babel/register": "7.0.0",
     "@types/jest": "23.1.5",
-    "@types/react": "16.8.2",
-    "@types/react-dom": "16.8.0",
+    "@types/react": "16.8.10",
+    "@types/react-dom": "16.8.3",
     "@types/react-router": "3",
-    "@types/styled-components": "4.0.3",
-    "babel-plugin-module-resolver": "3.1.1",
+    "@types/styled-components": "4.1.12",
+    "autoprefixer": "9.4.10",
+    "babel-plugin-macros": "2.5.0",
+    "babel-plugin-module-resolver": "3.2.0",
     "babel-plugin-styled-components": "1.10.0",
-    "fp-ts": "1.13.0",
+    "fp-ts": "1.15.0",
     "io-ts": "1.7.1",
     "io-ts-types": "0.4.2",
-    "monocle-ts": "1.5.3",
-    "react": "16.8.1",
+    "monocle-ts": "1.7.1",
+    "react": "16.8.6",
     "react-datetime": "2.14.0",
-    "react-dom": "16.8.1",
+    "react-dom": "16.8.6",
     "react-pose": "4.0.5",
     "react-router": "3.2.1",
-    "styled-components": "4.1.2",
+    "styled-components": "4.2.0",
     "typelevel-ts": "0.3.4",
-    "typescript": "3.2.2"
+    "typescript": "3.3.4000"
   }
 }
diff --git a/src/CommonStyles.ts b/src/CommonStyles.ts
index f446ab9bf..e9c978dd3 100644
--- a/src/CommonStyles.ts
+++ b/src/CommonStyles.ts
@@ -3,7 +3,6 @@ import {
   SimpleInterpolation,
   keyframes,
   Keyframes,
-  Styles,
 } from 'styled-components'
 import { PopOverPosition } from '@monorail/popOver/PopOver'
 
@@ -16,18 +15,22 @@ enum AuthSubAppName {
   Range = 'range',
   TechOps = 'techops',
   Tracker = 'tracker',
+  Execution = 'execution',
+  Home = 'home',
+  Events = 'events',
+  EventDesign = 'event-design',
 }
 
-export const visible = (isVisible = false): Styles =>
+export const visible = (isVisible = false) =>
   isVisible
-    ? {
-        visibility: 'visible',
-        opacity: 0.9999, // Doing .9999 keeps the GPU activated on this element so that it can quickly change back to 0.
-      }
-    : {
-        visibility: 'hidden',
-        opacity: 0,
-      }
+    ? css`
+        visibility: visible;
+        opacity: 0.9999; /* Doing .9999 keeps the GPU activated on this element so that it can quickly change back to 0. */
+      `
+    : css`
+        visibility: hidden;
+        opacity: 0;
+      `
 
 /*
 * Elevation
@@ -114,9 +117,9 @@ const elevationStyles = {
     '0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)',
 }
 
-export const getElevation = (elevation: ElevationRange): Styles => ({
-  boxShadow: elevationStyles[elevation],
-})
+export const getElevation = (elevation: ElevationRange) => css`
+  box-shadow: ${elevationStyles[elevation]};
+`
 
 /*
 * Flex Helpers
@@ -128,10 +131,10 @@ const defaultWrap = 'nowrap'
 export const flexFlow = (
   direction = defaultDirection,
   wrap = defaultWrap,
-): Styles => ({
-  display: 'flex',
-  flexFlow: `${direction} ${wrap}`,
-})
+) => css`
+  display: flex;
+  flex-flow: ${direction} ${wrap};
+`
 
 /*
 * Typography
@@ -217,7 +220,7 @@ export const typography = (
   weight: number,
   size: FontSizes,
   margin?: string,
-): Styles => ({
+) => ({
   fontWeight: weight,
   ...fontSizeLookUp[size],
   ...(margin ? typographyMargin(size, margin) : {}),
@@ -400,6 +403,10 @@ export enum AppName {
   TechOps = 'techops',
   Tracker = 'tracker',
   Training = 'training',
+  Execution = 'execution',
+  Home = 'home',
+  Events = 'events',
+  EventDesign = 'event-design',
 }
 
 //#endregion App Name
@@ -468,6 +475,7 @@ export enum Colors {
   Inactive = 'inactive',
 
   Academy = 'academy',
+  Execution = 'execution',
   Admin = 'admin',
   Catalog = 'catalog',
   Dashboard = 'dashboard',
@@ -499,6 +507,10 @@ export type AppOrAuthSubAppNameString =
   | 'techops'
   | 'repo'
   | 'externalLms'
+  | 'execution'
+  | 'home'
+  | 'events'
+  | 'event-design'
 
 const assertUnreachable = (msg: string): never => {
   throw new Error(msg)
@@ -518,6 +530,15 @@ export const convertAppNameToColor = (
     case AppName.Dashboard:
     case AuthSubAppName.Dashboard:
       return Colors.Dashboard
+    case AppName.Home:
+    case AuthSubAppName.Home:
+    case AppName.Events:
+    case AuthSubAppName.Events:
+    case AppName.EventDesign:
+    case AuthSubAppName.EventDesign:
+    case AuthSubAppName.Execution:
+    case AppName.Execution:
+      return Colors.White
     case AppName.Range:
     case AuthSubAppName.Range:
       return Colors.Range
@@ -570,6 +591,14 @@ export const convertStringToAppName = (
       return AppName.Repo
     case 'externalLms':
       return AppName.LMS
+    case 'execution':
+      return AppName.Execution
+    case 'home':
+      return AppName.Home
+    case 'events':
+      return AppName.Events
+    case 'event-design':
+      return AppName.EventDesign
     default:
       return assertUnreachable('Invalid appName')
   }
@@ -609,9 +638,25 @@ export const convertAppNameToString = (
       return 'repo'
     case AppName.LMS:
       return 'externalLms'
+    case AppName.Home:
+    case AuthSubAppName.Home:
+      return 'home'
+    case AppName.Events:
+    case AuthSubAppName.Events:
+    case AppName.Execution:
+    case AuthSubAppName.Execution:
+      return 'events'
+    case AppName.EventDesign:
+    case AuthSubAppName.EventDesign:
+      return 'event-design'
   }
 }
 
+type AppNameType = string | AppName
+
+export const isAppName = (name: AppNameType): name is AppName =>
+  Object.values(AppName).includes(name)
+
 export const convertEventStateToColor = (eventState: EventState): Colors => {
   switch (eventState) {
     case EventState.Active:
@@ -691,6 +736,7 @@ export const colorHSLAMap = ({
     [Colors.TechOps]: { h: 324, s: 60, l: 60, a: alpha },
     [Colors.Repo]: { h: 79, s: 59, l: 49, a: alpha },
     [Colors.LMS]: { h: 2, s: 61, l: 50, a: alpha },
+    [Colors.Execution]: { h: 196, s: 75, l: 50, a: alpha },
 
     // Event Status
     // In Progress
@@ -1048,7 +1094,7 @@ export const sizes = {
     width: 176,
   },
   appSwitcher: {
-    width: 368,
+    width: 376,
   },
 }
 
diff --git a/src/CoreUtils/Number.ts b/src/CoreUtils/Number.ts
deleted file mode 100644
index 46b4c9bcc..000000000
--- a/src/CoreUtils/Number.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Ord } from 'fp-ts/lib/Ord'
-import { Ordering } from 'fp-ts/lib/Ordering'
-import { setoidStrict } from './Setoid'
-
-/**
- * Determines ordering of two strings (numeric comparison)
- */
-export const numericCompare = (x: number, y: number): Ordering =>
-  x < y ? -1 : x > y ? 1 : 0
-
-/**
- * Ord instance for number
- */
-export const ordNumeric: Ord<number> = {
-  ...setoidStrict,
-  compare: numericCompare,
-}
diff --git a/src/CoreUtils/Record.ts b/src/CoreUtils/Record.ts
deleted file mode 100644
index 4976c241b..000000000
--- a/src/CoreUtils/Record.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import { Option, fromNullable, isNone, none, some } from 'fp-ts/lib/Option'
-import * as record from 'fp-ts/lib/Record'
-import { Ord } from 'fp-ts/lib/Ord'
-import { Ordering } from 'fp-ts/lib/Ordering'
-import { sort } from 'fp-ts/lib/Array'
-import { Setoid } from 'fp-ts/lib/Setoid'
-
-import { forEach } from './Array'
-import { ExtractAFromOption, SafePrimitive } from './type-level'
-import { toLower } from './String'
-
-/**
- * Retrieves the keys of an object while retaining keyof type information
- */
-export const keys = <
-  A extends { [key: string]: unknown },
-  K extends keyof A & string
->(
-  x: A,
-): K[] => Object.keys(x) as K[]
-
-/**
- * Retrieves the values of an object while retaining type information
- */
-export const values = <
-  A extends { [key: string]: unknown },
-  K extends keyof A & string
->(
-  x: A,
-): Array<A[K]> => Object.values(x) as Array<A[K]>
-
-/**
- * Retrieves the value of a given property key from an object (curried)
- */
-export const prop = <A extends object, Key extends keyof A>(k: Key) => (
-  obj: A,
-): A[Key] => obj[k]
-
-/**
- * Retrieves the value of a given property key from an object (uncurried)
- */
-export const prop_ = <A extends object, Key extends keyof A>(
-  k: Key,
-  obj: A,
-): A[Key] => obj[k]
-
-/**
- * General lookup function that retrieves the value associated with a given
- * property key in an object, returning an option. Returns a None if the key
- * is missing from the object OR if the key exists but the value is null or
- * undefined
- */
-export const lookup = <
-  A extends Record<PropertyKey, unknown>,
-  B extends keyof A
->(
-  key: B,
-  fa: A,
-): Option<A[B]> => (fa.hasOwnProperty(key) ? fromNullable(fa[key]) : none)
-
-/**
- * Omits the key-value pairs from an object associated with the provided keys
- */
-export const omit = <A extends { [key: string]: unknown }, K extends keyof A>(
-  rec: A,
-  ks: K[],
-): { [P in Exclude<keyof A, K>]: A[P] } => {
-  const { ...result } = rec
-
-  forEach(ks, k => delete result[k])
-
-  return result
-}
-
-/**
- * Picks the key-value pairs from an object associated with the provided keys
- */
-export const pick = <
-  A extends { [key: string]: unknown },
-  K extends keyof A & string
->(
-  rec: A,
-  ks: K[],
-): { [P in K]: A[P] } => {
-  const result = {} as { [P in K]: A[P] }
-
-  forEach(ks, k => {
-    result[k] = rec[k]
-  })
-
-  return result
-}
-
-export const sequenceMixedRecordOptions = <
-  A extends {
-    [key: string]: Option<SafePrimitive>
-  },
-  B extends { [P in keyof A & string]: ExtractAFromOption<A[P]> }
->(
-  rec: A,
-): Option<B> => {
-  const result = {} as B & {
-    [key: string]: unknown
-  }
-
-  for (const [k, opt] of record.toArray(rec)) {
-    if (isNone(opt)) {
-      return none
-    } else {
-      result[k] = opt.value
-    }
-  }
-
-  return some(result)
-}
-
-export const traverseMixedRecordOptions = <
-  A extends {
-    [key: string]: SafePrimitive
-  },
-  B extends { [P in keyof A]: A[P] },
-  F extends (x: B[keyof B]) => Option<unknown>
->(
-  rec: A,
-  f: F,
-): Option<{ [P in keyof B & string]: ExtractAFromOption<ReturnType<F>> }> => {
-  const result = {} as {
-    [P in keyof B & string]: ExtractAFromOption<ReturnType<F>>
-  } & {
-    [key: string]: unknown
-  }
-
-  for (const [k, val] of record.toArray(rec)) {
-    const opt = f(val as B[keyof B])
-    if (isNone(opt)) {
-      return none
-    } else {
-      result[k] = opt.value
-    }
-  }
-
-  return some(result)
-}
-
-/**
- * Interface for records extending a { name: string } key-val pair
- */
-export interface RecordWithName {
-  name: string
-}
-
-/**
- * Equality checker for RecordWithName, comparing lowercase names
- */
-export const recordWithNameLowerEquality = <A extends RecordWithName>(
-  a: A,
-  b: A,
-): boolean => toLower(a.name) === toLower(b.name)
-
-/**
- * Comparator for RecordWithName, comparing lowercase names alphabetically
- */
-export const recordWithNameLowerComparator = <A extends RecordWithName>(
-  a: A,
-  b: A,
-): Ordering => {
-  const nameA = toLower(a.name)
-  const nameB = toLower(b.name)
-  return nameA < nameB ? -1 : nameA > nameB ? 1 : 0
-}
-
-export const setoidRecordWithNameLower: Setoid<RecordWithName> = {
-  equals: recordWithNameLowerEquality,
-}
-
-/**
- * Ord instance for types extending the RecordWithName interface
- * that does comparisons & equality checking against the name prop
- * converted to lowercase
- */
-export const ordRecordWithNameLower: Ord<RecordWithName> = {
-  ...setoidRecordWithNameLower,
-  compare: recordWithNameLowerComparator,
-}
-
-export const sortRecords = <
-  S extends Record<K, A>,
-  K extends keyof S & string,
-  A extends S[K]
->(
-  ord: Ord<S>,
-) => (data: Array<S>) => sort(ord)(data)
diff --git a/src/CoreUtils/Setoid.ts b/src/CoreUtils/Setoid.ts
deleted file mode 100644
index e01836876..000000000
--- a/src/CoreUtils/Setoid.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Setoid, strictEqual } from 'fp-ts/lib/Setoid'
-import { shallowEqual } from './shallowEqual'
-
-/**
- * Generic setoid that uses strict equality checking
- */
-export const setoidStrict = { equals: strictEqual }
-
-/**
- * Function that returns a generic setoid that uses strict equality checking
- */
-export const getSetoidStrict = <A>(): Setoid<A> => setoidStrict
-
-/**
- * Generic setoid that uses shallow equality checking
- */
-export const setoidShallowEq = { equals: shallowEqual }
-
-/**
- * Function that returns a generic setoid that uses shallow equality checking
- */
-export const getSetoidShallowEq = <A extends object>(): Setoid<A> =>
-  setoidShallowEq
diff --git a/src/CoreUtils/__tests__/Array.jest.ts b/src/CoreUtils/__tests__/Array.jest.ts
deleted file mode 100644
index 12ce41ae6..000000000
--- a/src/CoreUtils/__tests__/Array.jest.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { all, any, notAny } from '../Array'
-
-const isGreaterThanZero = (x: number): boolean => x > 0
-
-describe('all', () => {
-  it('should return false when a member of the array does not hold true for a predicate', () => {
-    const actual = all([-1, 0, 1, 2, 3], isGreaterThanZero)
-    const expected = false
-    expect(actual).toBe(expected)
-  })
-
-  it('should return true when a predicate holds true for all members of an array', () => {
-    const actual = all([1, 2, 3, 4, 5], isGreaterThanZero)
-    const expected = true
-    expect(actual).toBe(expected)
-  })
-})
-
-describe('any', () => {
-  it('should return true when a predicate holds true for any member of an array', () => {
-    const actual = any([-5, 0, -3, 2], isGreaterThanZero)
-    const expected = true
-    expect(actual).toBe(expected)
-  })
-
-  it('should return false when a predicate holds true for no members of an array', () => {
-    const actual = any([-5, -4, -3, -2, -1], isGreaterThanZero)
-    const expected = false
-    expect(actual).toBe(expected)
-  })
-})
-
-describe('notAny', () => {
-  it('should return false when a predicate holds true for any member of an array', () => {
-    const actual = notAny([-5, 0, -3, 2], isGreaterThanZero)
-    const expected = false
-    expect(actual).toBe(expected)
-  })
-
-  it('should return true when a predicate holds true for no members of an array', () => {
-    const actual = notAny([-5, -4, -3, -2, -1], isGreaterThanZero)
-    const expected = true
-    expect(actual).toBe(expected)
-  })
-})
diff --git a/src/CoreUtils/general.ts b/src/CoreUtils/general.ts
deleted file mode 100644
index c33b2a71c..000000000
--- a/src/CoreUtils/general.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Function2 } from 'fp-ts/lib/function'
-import { IO } from 'fp-ts/lib/IO'
-
-import { isNewtypeNaN } from './newtypes'
-import {
-  isNil,
-  isNumber,
-  isFalse,
-  isEmptyString,
-  isZero,
-} from './primitive-guards'
-import { Falsy } from './type-level'
-
-export const constVoid = (): void => {}
-
-/**
- * Flips the order of the arguments to an uncurried function taking two
- * arguments.
- */
-export const flip_ = <A, B, C>(f: Function2<A, B, C>): Function2<B, A, C> => (
-  b,
-  a,
-) => f(a, b)
-
-/**
- * Simple binary composition. Also known as `compose2`
- */
-export const o = <A, B, C>(f: (y: B) => C, g: (x: A) => B) => (x: A): C =>
-  f(g(x))
-
-/**
- * Api action helper
- *
- * Example:
- * const LoadPackagesApiActionTypes = makeApiActionTypes(
- *   'learning/content-authoring/LOAD_PACKAGES/optimistic',
- *   'learning/content-authoring/LOAD_PACKAGES/request',
- *   'learning/content-authoring/LOAD_PACKAGES/success',
- *   'learning/content-authoring/LOAD_PACKAGES/failure',
- * )
- */
-export const makeApiActionTypes = <A extends [string, string, string, string]>(
-  ...args: A
-): {
-  optimistic: A[0]
-  request: A[1]
-  success: A[2]
-  failure: A[3]
-} => ({
-  optimistic: args[0],
-  request: args[1],
-  success: args[2],
-  failure: args[3],
-})
-
-/**
- * Constant action helper
- *
- * Example:
- * const LoadPackages = makeConstantActionType(
- *   'learning/content-authoring/LOAD_PACKAGES',
- * )
- */
-export const makeConstantActionType = <A extends [string]>(...args: A): A[0] =>
-  args[0]
-
-/**
- * Type guard for the Falsy type
- */
-// tslint:disable-next-line:no-any
-export const isFalsy = (x: any): x is Falsy =>
-  isNil(x) ||
-  isFalse(x) ||
-  isEmptyString(x) ||
-  isZero(x) ||
-  (isNumber(x) && isNewtypeNaN(x))
diff --git a/src/CoreUtils/tuple.ts b/src/CoreUtils/tuple.ts
deleted file mode 100644
index 5982dcd10..000000000
--- a/src/CoreUtils/tuple.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { sequenceT } from 'fp-ts/lib/Apply'
-import { either } from 'fp-ts/lib/Either'
-import { option } from 'fp-ts/lib/Option'
-import { task } from 'fp-ts/lib/Task'
-import { taskEither } from 'fp-ts/lib/TaskEither'
-
-import { Primitive } from './type-level'
-
-/**
- * Utility for constructing tuples with proper inference
- */
-export const tuple = <A extends Primitive[]>(...args: A) => args
-
-/**
- * Flips the position of each item in a 2-tuple
- */
-export const swap = <A, B>([x, y]: [A, B]): [B, A] => [y, x]
-
-/**
- * sequence utility for a tuple of Options
- */
-export const sequenceTupleOptions = sequenceT(option)
-
-/**
- * sequence utility for a tuple of Eithers
- */
-export const sequenceTupleEithers = sequenceT(either)
-
-/**
- * sequence utility for a tuple of Task
- */
-export const sequenceTupleTasks = sequenceT(task)
-
-/**
- * sequence utility for a tuple of TaskEithers
- */
-export const sequenceTupleTaskEithers = sequenceT(taskEither)
diff --git a/src/StyleHelpers.ts b/src/StyleHelpers.ts
index 2ceeab5ee..8521163f7 100644
--- a/src/StyleHelpers.ts
+++ b/src/StyleHelpers.ts
@@ -1,28 +1,19 @@
-import React from 'react'
-import {
-  default as styledOrig,
+import { GlobalAppThemeInterface } from '@monorail/globalAppTheme'
+import styled, {
   FlattenInterpolation,
   SimpleInterpolation,
   ThemeProps,
+  css,
 } from 'styled-components'
-import { GlobalAppThemeInterface } from '@monorail/globalAppTheme'
 
 export type CssOverrides =
   | SimpleInterpolation
-  | FlattenInterpolation<ThemeProps<GlobalAppThemeInterface>>[]
+  | FlattenInterpolation<ThemeProps<GlobalAppThemeInterface>>
 
 export type StyledComponentCssOverrides = {
   cssOverrides?: CssOverrides
 }
 
-/**
- * TODO: Get rid of this. This was something Dan added that isn't correctly typed. Any references should be replaced
- * with styled<Props, 'div'>('div')
- */
-export const styled = <P, E = HTMLDivElement>(
-  tagName: string | React.ComponentType<P>,
-) => styledOrig<P & React.HTMLProps<E>, any>(tagName) // tslint:disable-line:no-any
-
 type Props = {
   cssOverrides?: CssOverrides
 }
@@ -39,10 +30,17 @@ type Props = {
   />
  ```
  */
-export const Div = styledOrig<Props, 'div'>('div')`
-  ${({ cssOverrides }) => cssOverrides}
-`
 
-export const Form = styledOrig<Props, 'form'>('form')`
-  ${({ cssOverrides }) => cssOverrides}
-`
+export const Div = styled.div<Props>(
+  ({ cssOverrides }) =>
+    css`
+      ${cssOverrides};
+    `,
+)
+
+export const Form = styled.form<Props>(
+  ({ cssOverrides }) =>
+    css`
+      ${cssOverrides};
+    `,
+)
diff --git a/src/actionsMenu/ActionsMenu.tsx b/src/actionsMenu/ActionsMenu.tsx
new file mode 100644
index 000000000..a293733ea
--- /dev/null
+++ b/src/actionsMenu/ActionsMenu.tsx
@@ -0,0 +1,55 @@
+import React, { FC } from 'react'
+import { PopOver } from '@monorail/popOver/PopOver'
+import { SimpleListItem } from '@monorail/list/List'
+import { IconButton } from '@monorail/buttons/IconButton'
+import { Menu } from '@monorail/menu/Menu'
+import { ButtonDisplay } from '@monorail/buttons/buttonTypes'
+
+/*
+* Styles
+*/
+
+/*
+* Types
+*/
+
+type ActionsMenuProps = {
+  menuItems: Array<{
+    label: string
+    iconName?: string
+    onClick: () => void
+    featuredAction?: boolean // Will be implemented later
+  }>
+}
+
+/*
+* Components
+*/
+
+export const ActionsMenu: FC<ActionsMenuProps> = ({ menuItems }) => (
+  <>
+    {menuItems.length > 0 && (
+      <PopOver
+        popOver={props => (
+          <Menu {...props}>
+            {menuItems.map(menuItem => (
+              <SimpleListItem
+                size={32}
+                leftIcon={menuItem.iconName}
+                primaryText={menuItem.label}
+                onClick={menuItem.onClick}
+              />
+            ))}
+          </Menu>
+        )}
+        toggle={props => (
+          <IconButton
+            icon="more_vert"
+            display={ButtonDisplay.Chromeless}
+            {...props}
+          />
+        )}
+      />
+    )}
+  </>
+)
diff --git a/src/alertBox/AlertBox.tsx b/src/alertBox/AlertBox.tsx
index 7f3712b10..8b9665a11 100644
--- a/src/alertBox/AlertBox.tsx
+++ b/src/alertBox/AlertBox.tsx
@@ -1,5 +1,5 @@
 import React, { Component, ReactNode } from 'react'
-import styled, { SimpleInterpolation } from 'styled-components'
+import styled, { css, SimpleInterpolation } from 'styled-components'
 
 import { Icon } from '@monorail/icon/Icon'
 import {
@@ -17,25 +17,27 @@ type CCAlertBoxProps = {
   label?: ReactNode
 }
 
-export const CCAlertBox = styled<CCAlertBoxProps, 'div'>('div')`
-  ${flexFlow('row')};
-
-  background-color: ${colors(Colors.Red, 0.15)};
-  border-radius: 4px;
-  flex-shrink: 0;
-  height: 48px;
-  position: relative; /* ::icon is pos: abs to this element. */
-
-  &::before {
-    bottom: 8px;
-    content: '';
-    left: 16px;
-    position: absolute;
-    width: 32px;
-  }
+export const CCAlertBox = styled.div<CCAlertBoxProps>(
+  ({ cssOverrides }) => css`
+    ${flexFlow('row')};
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    background-color: ${colors(Colors.Red, 0.15)};
+    border-radius: 4px;
+    flex-shrink: 0;
+    height: 48px;
+    position: relative; /* ::icon is pos: abs to this element. */
+
+    &::before {
+      bottom: 8px;
+      content: '';
+      left: 16px;
+      position: absolute;
+      width: 32px;
+    }
+
+    ${cssOverrides};
+  `,
+)
 
 const StyledIconLeft = styled(Icon)`
   color: #f44336;
@@ -43,14 +45,16 @@ const StyledIconLeft = styled(Icon)`
   position: relative; /* give z-index so ::before bg is behind icon */
 `
 
-const Title = styled('h1')`
+const Title = styled.h1`
   ${typography(700, FontSizes.Title3)};
+
   color: ${colors(Colors.Black89)};
   margin: 16px 0;
 `
 
-const AlertDetails = styled('span')`
+const AlertDetails = styled.span`
   ${typography(300, FontSizes.Content)};
+
   color: ${colors(Colors.Black89)};
   margin: auto 48px auto auto;
 `
diff --git a/src/appIcon/AppIcon.tsx b/src/appIcon/AppIcon.tsx
index 8df233fe7..18b131a4e 100644
--- a/src/appIcon/AppIcon.tsx
+++ b/src/appIcon/AppIcon.tsx
@@ -1,45 +1,41 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
+import { CommonComponentType } from '@monorail/types'
+import { Icon } from '@monorail/icon/Icon'
 import {
   AppOrAuthSubAppName,
+  Colors,
   borderRadius,
   colors,
-  Colors,
   convertAppNameToColor,
-  convertAppNameToString,
   flexFlow,
 } from '@monorail/CommonStyles'
-import { Icon } from '@monorail/icon/Icon'
-import { CommonComponentType } from '@monorail/types'
 
 type AppIconProps = CommonComponentType & {
   appName: AppOrAuthSubAppName
 }
 
-export const AppIcon = styled<AppIconProps>(
-  ({ appName, cssOverrides, ...otherProps }) => (
-    <div {...otherProps}>
-      <Icon icon={convertAppNameToString(appName)} />
-    </div>
-  ),
-)`
-  ${({ appName }) => css`
-    background: ${colors(convertAppNameToColor(appName))};
-  `};
-
-  ${flexFlow('row')};
-  ${borderRadius()};
+export const AppIcon = styled(({ appName, cssOverrides, ...otherProps }) => (
+  <div {...otherProps}>
+    <Icon icon={appName} />
+  </div>
+))<AppIconProps>(
+  ({ appName, cssOverrides }) => css`
+    ${flexFlow('row')};
+    ${borderRadius()};
 
-  box-sizing: border-box;
-  height: 16px;
-  width: 16px;
+    background: ${colors(convertAppNameToColor(appName))};
+    box-sizing: border-box;
+    height: 16px;
+    width: 16px;
 
-  ${Icon} {
-    fill: ${colors(Colors.White)};
-    height: 100%;
-    margin: auto;
-    width: 100%;
-  }
+    ${Icon} {
+      fill: ${colors(Colors.White)};
+      height: 100%;
+      margin: auto;
+      width: 100%;
+    }
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
index c95340a4f..8b3b7d5dc 100644
--- a/src/avatar/Avatar.tsx
+++ b/src/avatar/Avatar.tsx
@@ -1,6 +1,5 @@
 import React, { StatelessComponent } from 'react'
 import styled, { css, SimpleInterpolation } from 'styled-components'
-
 import { borderRadius, Colors, colors } from '@monorail/CommonStyles'
 
 type CCAvatarProps = {
@@ -10,9 +9,9 @@ type CCAvatarProps = {
 
 const size = 24
 
-const CCAvatar = styled<CCAvatarProps, 'div'>('div')`
-  ${({ team }) =>
-    team
+const CCAvatar = styled.div<CCAvatarProps>(
+  ({ team, cssOverrides }) => css`
+    ${team
       ? css`
           ${borderRadius()};
 
@@ -23,19 +22,21 @@ const CCAvatar = styled<CCAvatarProps, 'div'>('div')`
           border-radius: ${size / 2}px;
         `};
 
-  color: ${colors(Colors.White)};
-  flex-shrink: 0;
-  font-size: 9.89px;
-  font-weight: 900;
-  height: ${size}px;
-  line-height: ${size}px;
-  text-align: center;
-  text-transform: uppercase;
-  user-select: none;
-  width: ${size}px;
+    color: ${colors(Colors.White)};
+    flex-shrink: 0;
+    font-size: 9.89px;
+    font-weight: 900;
+    height: ${size}px;
+    line-height: ${size}px;
+    text-align: center;
+    text-transform: uppercase;
+    user-select: none;
+    width: ${size}px;
+
+    ${cssOverrides};
+  `,
+)
 
-  ${({ cssOverrides }) => cssOverrides};
-`
 type AvatarProps = CCAvatarProps & {
   first: string
   last: string
diff --git a/src/brand/Logo.tsx b/src/brand/Logo.tsx
index 85006a0c9..fd5274599 100644
--- a/src/brand/Logo.tsx
+++ b/src/brand/Logo.tsx
@@ -1,13 +1,16 @@
 import React, { ComponentType } from 'react'
+import styled, { css, SimpleInterpolation } from 'styled-components'
 import { colors, Colors } from '@monorail/CommonStyles'
-import styled, { SimpleInterpolation } from 'styled-components'
+import { CommonComponentType } from '@monorail/types'
 
-const LogoSvg = styled<{ cssOverrides?: SimpleInterpolation }, 'svg'>('svg')`
-  height: 100%;
-  width: auto;
+const LogoSvg = styled.svg<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    height: 100%;
+    width: auto;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 export const SimSpaceLogo: ComponentType<{
   background?: Colors.BrandDarkBlue | Colors.BrandLightBlue
diff --git a/src/brand/LogoBox.tsx b/src/brand/LogoBox.tsx
index b9d6d51f8..c7ec0a260 100644
--- a/src/brand/LogoBox.tsx
+++ b/src/brand/LogoBox.tsx
@@ -1,9 +1,10 @@
-import styled, { SimpleInterpolation } from 'styled-components'
+import styled, { css, SimpleInterpolation } from 'styled-components'
 import {
   borderRadius,
   Colors,
   colors,
   ElevationRange,
+  flexFlow,
   getElevation,
 } from '@monorail/CommonStyles'
 
@@ -13,20 +14,31 @@ type LogoBoxProps = {
   cssOverrides?: SimpleInterpolation
 }
 
-export const LogoBox = styled<LogoBoxProps, 'div'>('div')`
-  ${getElevation(ElevationRange.Elevation0)};
-  ${borderRadius()};
+export const LogoBox = styled.div<LogoBoxProps>(
+  ({ alignLeft, alignRight, cssOverrides }) => css`
+    ${borderRadius()};
+    ${flexFlow('column')};
+    ${getElevation(ElevationRange.Elevation0)};
 
   background: ${colors(Colors.White)};
-  display: inline-block;
   height: 32px;
-  max-width: 200px;
+  justify-content: center;
+  max-width: 144px;
   padding: 4px 8px;
   position: relative;
 
-  ${({ alignLeft }) => alignLeft && `position: absolute; left: 8px; top:8px;`}
-  ${({ alignRight }) =>
-    alignRight && `position: absolute; right: 8px; top:8px;`}
-
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${alignLeft &&
+      css`
+        position: absolute;
+        left: 8px;
+        top: 8px;
+      `}
+    ${alignRight &&
+      css`
+        position: absolute;
+        right: 8px;
+        top: 8px;
+      `}
+    ${cssOverrides};
+  `,
+)
diff --git a/src/buttons/Button.tsx b/src/buttons/Button.tsx
index 51bdc56e9..9d672dd24 100644
--- a/src/buttons/Button.tsx
+++ b/src/buttons/Button.tsx
@@ -1,5 +1,5 @@
 import React, { Component, MouseEvent } from 'react'
-import styled, { css, SimpleInterpolation } from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import {
   baseChromelessStyles,
@@ -12,11 +12,14 @@ import {
   buttonTransition,
   Colors,
   colors,
+  flexFlow,
   FontSizes,
   typography,
 } from '@monorail/CommonStyles'
 import { ButtonDisplay, ButtonSize } from '@monorail/buttons/buttonTypes'
 import { Icon } from '@monorail/icon/Icon'
+import { CommonComponentType } from '@monorail/types'
+import { LinkProps } from '@monorail/list/List'
 
 export const buttonDisplayCss = {
   [ButtonDisplay.Primary]: css`
@@ -54,44 +57,45 @@ export const buttonSizeCss = {
   `,
 }
 
-const CCButton = styled<ButtonProps, 'button'>('button')`
-  ${({ display }) => buttonDisplayCss[display]};
-  ${({ size }) => buttonSizeCss[size]};
-  ${({ disabled }) => disabled && baseDisabledStyles};
-
-  ${typography(700, FontSizes.Title5)};
-  ${borderRadius()};
-
-  cursor: pointer;
-  flex-shrink: 0;
-  outline: none;
-  text-transform: uppercase;
-  user-select: none;
-
-  ${buttonTransition};
-
-  ${Icon} {
-    color: currentColor;
-    margin-left: -4px;
-    margin-right: 4px;
-    margin-top: -16px;
-    position: relative; /* Needs position: relative; so that you can do the top hack. */
-    top: 4px;
-  }
+const CCButton = styled.button<ButtonProps>(
+  ({ disabled, size, display, cssOverrides }) => css`
+    ${buttonDisplayCss[display]};
+    ${buttonSizeCss[size]};
+    ${disabled && baseDisabledStyles};
 
-  ${baseFocusStyles()};
+    ${typography(700, FontSizes.Title5)};
+    ${borderRadius()};
+    ${flexFlow('row')};
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    align-items: center;
+    cursor: pointer;
+    flex-shrink: 0;
+    outline: none;
+    text-transform: uppercase;
+    user-select: none;
+    justify-content: center;
 
-export type ButtonProps = {
-  size: ButtonSize
-  display: ButtonDisplay
-  cssOverrides?: SimpleInterpolation
-  disabled?: boolean
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
-  type: string
-}
+    ${buttonTransition};
+
+    ${Icon} {
+      color: currentColor;
+      margin: auto 4px auto - 4px;
+    }
+
+    ${baseFocusStyles()};
+
+    ${cssOverrides};
+  `,
+)
+
+export type ButtonProps = CommonComponentType &
+  LinkProps & {
+    size: ButtonSize
+    display: ButtonDisplay
+    disabled?: boolean
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void
+    type: 'button' | 'reset' | 'submit'
+  }
 
 export class Button extends Component<ButtonProps> {
   static defaultProps = {
diff --git a/src/buttons/IconButton.tsx b/src/buttons/IconButton.tsx
index d6032db36..7db011133 100644
--- a/src/buttons/IconButton.tsx
+++ b/src/buttons/IconButton.tsx
@@ -1,6 +1,6 @@
 import React, { Component, MouseEvent } from 'react'
 import styled, { css, SimpleInterpolation } from 'styled-components'
-
+import { Icon } from '@monorail/icon/Icon'
 import {
   baseChromelessStyles,
   baseDisabledStyles,
@@ -14,7 +14,6 @@ import {
   colors,
   flexFlow,
 } from '@monorail/CommonStyles'
-import { Icon } from '@monorail/icon/Icon'
 import {
   ButtonSize,
   ButtonDisplay,
@@ -83,34 +82,33 @@ const iconButtonSizeCss = {
   `,
 }
 
-export const CCIconButton = styled<CCIconButtonProps, 'button'>('button')`
-  ${({ display }) => iconButtonDisplayCss[display]};
-  ${({ size }) => iconButtonSizeCss[size]};
-  ${({ disabled }) => disabled && baseDisabledStyles};
-  ${({ shape }) =>
-    borderRadius(
+export const CCIconButton = styled.button<CCIconButtonProps>(
+  ({ disabled, display, size, shape, cssOverrides, darkMode, iconCss }) => css`
+    ${iconButtonDisplayCss[display]};
+    ${iconButtonSizeCss[size]};
+    ${disabled && baseDisabledStyles};
+    ${borderRadius(
       shape === IconButtonShape.Default
         ? BorderRadius.Round
         : BorderRadius.Medium,
     )};
 
-  ${flexFlow()};
+    ${flexFlow()};
 
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  flex-shrink: 0;
-  justify-content: center;
-  outline: none;
-  padding: 0;
-  text-transform: uppercase;
-  user-select: none;
+    align-items: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    flex-shrink: 0;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+    text-transform: uppercase;
+    user-select: none;
 
-  ${buttonTransition};
+    ${buttonTransition};
 
-  ${Icon} {
-    ${({ darkMode }) =>
-      darkMode
+    ${Icon} {
+      ${darkMode
         ? css`
             color: ${colors(Colors.White)};
           `
@@ -118,13 +116,14 @@ export const CCIconButton = styled<CCIconButtonProps, 'button'>('button')`
             color: currentColor;
           `};
 
-    ${({ iconCss }) => iconCss};
-  }
+      ${iconCss};
+    }
 
-  ${baseFocusStyles()};
+    ${baseFocusStyles()};
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 type CCIconButtonProps = {
   cssOverrides?: SimpleInterpolation
@@ -135,7 +134,8 @@ type CCIconButtonProps = {
   iconCss?: SimpleInterpolation
   onClick?: (event: MouseEvent<Element>) => void
   size: ButtonSize
-  type: string
+  type: 'button' | 'reset' | 'submit'
+  className?: string
 }
 
 export type IconButtonProps = CCIconButtonProps & {
@@ -151,9 +151,9 @@ export class IconButton extends Component<IconButtonProps> {
   }
 
   render() {
-    const { icon, ...otherProps } = this.props
+    const { icon, className, ...otherProps } = this.props
     return (
-      <CCIconButton className="new-button" {...otherProps}>
+      <CCIconButton className={`new-button ${className}`} {...otherProps}>
         <Icon icon={icon} />
       </CCIconButton>
     )
diff --git a/src/buttons/LoadingButton.tsx b/src/buttons/LoadingButton.tsx
index f184138ab..849d1aa66 100644
--- a/src/buttons/LoadingButton.tsx
+++ b/src/buttons/LoadingButton.tsx
@@ -1,7 +1,7 @@
 import React, { Component, MouseEvent } from 'react'
 import { Button, ButtonProps } from './Button'
-import { Omit } from 'typelevel-ts'
 import { ButtonDisplay, ButtonSize } from '@monorail/buttons/buttonTypes'
+import { Omit } from 'typelevel-ts'
 
 type Props = Omit<ButtonProps, 'onClick'> & {
   loadingText?: string
diff --git a/src/cards/Cards.tsx b/src/cards/Cards.tsx
index a5123e8e7..fad6f81c0 100644
--- a/src/cards/Cards.tsx
+++ b/src/cards/Cards.tsx
@@ -1,5 +1,14 @@
-import React, { forwardRef, MouseEvent, StatelessComponent, Ref } from 'react'
+import React, {
+  forwardRef,
+  MouseEvent,
+  Ref,
+  StatelessComponent,
+  Children,
+  ReactNode,
+} from 'react'
+import styled, { css, SimpleInterpolation } from 'styled-components'
 import { AppIcon } from '@monorail/appIcon/AppIcon'
+import { CommonComponentType } from '@monorail/types'
 import { Icon } from '@monorail/icon/Icon'
 import {
   AppName,
@@ -13,20 +22,20 @@ import {
   getElevation,
   typography,
 } from '@monorail/CommonStyles'
-import styled, { css, SimpleInterpolation } from 'styled-components'
-import { CommonComponentType } from '@monorail/types'
 
-const BBCardContent = styled<CommonComponentType, 'div'>('div')`
-  ${flexFlow()};
+const BBCardContent = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  border-radius: inherit;
-  height: 100%;
-  overflow: hidden;
-  width: 100%;
-  position: relative; /* Needs pos:rel; so that it doesn't get placed under the shadow pseudo elements. */
+    border-radius: inherit;
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+    position: relative; /* Needs pos:rel; so that it doesn't get placed under the shadow pseudo elements. */
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 // building-blocks/cards/background
 export type BBCardBackgroundProps = CommonComponentType & {
@@ -35,10 +44,11 @@ export type BBCardBackgroundProps = CommonComponentType & {
   onClick?: (event: MouseEvent) => void
   ref?: Ref<any> // tslint:disable-line:no-any
   cssCardContent?: SimpleInterpolation
+  children?: ReactNode
 }
 
-export const BBCardBackground = styled<BBCardBackgroundProps>(
-  forwardRef(
+export const BBCardBackground = styled(
+  forwardRef<HTMLDivElement, BBCardBackgroundProps>(
     (
       {
         children,
@@ -55,72 +65,73 @@ export const BBCardBackground = styled<BBCardBackgroundProps>(
       </div>
     ),
   ),
-)`
-  ${({ hover }) =>
-    hover &&
-    css`
-      cursor: pointer;
-
-      &:hover {
-        &::after {
-          transition: box-shadow ease 125ms;
-          ${getElevation(ElevationRange.Elevation10)};
+)<BBCardBackgroundProps>(
+  ({ hover, cssOverrides, elevation = ElevationRange.Elevation6 }) => css`
+    ${hover &&
+      css`
+        cursor: pointer;
+
+        &:hover {
+          &::after {
+            transition: box-shadow ease 125ms;
+            ${getElevation(ElevationRange.Elevation10)};
+          }
         }
-      }
-    `};
-
-  ${flexFlow()};
-  ${borderRadius(BorderRadius.Large)};
+      `};
 
-  background: ${colors(Colors.White)};
-  position: relative; /* pos:re; because the shadow pseudo element is pos:abs; */
-  z-index: 0; /* mythical z-index: 0. The shadow pseudo element needs a negative z-index, but then it disappears. Have to reset the z-index to the zero value so that it appears above the background of the page but under the background of the card. */
+    ${flexFlow()};
+    ${borderRadius(BorderRadius.Large)};
 
-  ${({ cssOverrides }) => cssOverrides};
-
-  &::before {
-    border-radius: inherit;
     background: ${colors(Colors.White)};
-    bottom: 0;
-    content: '';
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 0;
-  }
-
-  &::after {
-    ${borderRadius(BorderRadius.Medium)};
+    position: relative; /* pos:re; because the shadow pseudo element is pos:abs; */
+    z-index: 0; /* mythical z-index: 0. The shadow pseudo element needs a negative z-index, but then it disappears. Have to reset the z-index to the zero value so that it appears above the background of the page but under the background of the card. */
+
+    ${cssOverrides};
+
+    &::before {
+      border-radius: inherit;
+      background: ${colors(Colors.White)};
+      bottom: 0;
+      content: '';
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 0;
+    }
+
+    &::after {
+      ${borderRadius(BorderRadius.Medium)};
+
+      ${getElevation(elevation)};
+
+      background: ${colors(Colors.White)};
+      bottom: 2px;
+      content: '';
+      left: 2px;
+      position: absolute;
+      right: 2px;
+      top: 2px;
+      z-index: -5;
+    }
+  `,
+)
 
-    ${({ elevation = ElevationRange.Elevation6 }) => getElevation(elevation)};
+const BBCardHeaderContainer = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow('row')};
 
-    background: ${colors(Colors.White)};
-    bottom: 2px;
-    content: '';
-    left: 2px;
-    position: absolute;
-    right: 2px;
-    top: 2px;
-    z-index: -5;
-  }
-`
+    align-items: center;
+    flex-shrink: 0;
+    height: 32px;
+    padding: 0 16px;
+    position: relative; /* BBCardBottomBorder is pos:abs relative to this. */
 
-const BBCardHeaderContainer = styled<
-  { cssOverrides: SimpleInterpolation },
-  'div'
->('div')`
-  ${flexFlow('row')};
-  align-items: center;
-  flex-shrink: 0;
-  height: 32px;
-  padding: 0 16px;
-  position: relative; /* BBCardBottomBorder is pos:abs relative to this. */
-
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-const BBCardHeaderTitle = styled('h1')`
+const BBCardHeaderTitle = styled.h1`
   ${typography(700, FontSizes.Title5)};
   margin: 0;
 `
@@ -141,8 +152,8 @@ type BBCardBottomBorderProps = {
   accentColor?: string
 }
 
-const BBCardBottomBorder = styled<BBCardBottomBorderProps, 'div'>('div')`
-  ${({ accentColor }) => css`
+const BBCardBottomBorder = styled.div<BBCardBottomBorderProps>(
+  ({ accentColor }) => css`
     background: linear-gradient(
       to right,
       ${colors(Colors.White, 0)} 0,
@@ -150,14 +161,14 @@ const BBCardBottomBorder = styled<BBCardBottomBorderProps, 'div'>('div')`
       ${accentColor} calc(100% - 16px),
       ${colors(Colors.White, 0)} 100%
     );
-  `};
 
-  bottom: 0;
-  height: 1px;
-  left: 0;
-  position: absolute;
-  right: 0;
-`
+    bottom: 0;
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+  `,
+)
 
 type BBCardHeaderProps = BBCardBottomBorderProps & {
   appIcon?: AppName
@@ -195,21 +206,21 @@ type BBCardGridProps = {
   cssOverrides?: SimpleInterpolation
 }
 
-export const BBCardGrid = styled<BBCardGridProps, 'div'>('div')`
-  display: grid;
-  flex-grow: 1;
-  grid-auto-rows: max-content;
-  grid-template-columns: repeat(
-    auto-fill,
-    ${({ cardWidth = 272 }) => cardWidth}px
-  );
-  justify-content: center;
-  padding: 20px 32px 14px;
-
-  /* IE11 doesn't work with grid that auto places content. Here starts the hacks to get it working with flex. */
-  display: -ms-flexbox; /* stylelint-disable-line */
-  flex-flow: row wrap;
-  align-content: flex-start;
-
-  ${({ cssOverrides }) => cssOverrides};
-`
+export const BBCardGrid = styled.div<BBCardGridProps>(
+  ({ cssOverrides, cardWidth = 272 }) => css`
+    display: grid;
+    flex-grow: 1;
+    grid-auto-rows: max-content;
+    grid-template-columns: repeat(auto-fill, ${cardWidth}px);
+    justify-content: center;
+    padding: 20px 32px 14px;
+
+    /* IE11 doesn't work with grid that auto places content. Here starts the hacks to get it working with flex. */
+    display: -ms-flexbox; /* stylelint-disable-line */
+    flex-flow: row wrap;
+    align-content: flex-start;
+    align-items: flex-start;
+
+    ${cssOverrides};
+  `,
+)
diff --git a/src/commonStyles/zindex.ts b/src/commonStyles/zindex.ts
new file mode 100644
index 000000000..7ebcad972
--- /dev/null
+++ b/src/commonStyles/zindex.ts
@@ -0,0 +1,18 @@
+export enum ZIndexNodeName {
+  SidebarContainer = 'SidebarContainer',
+  NewFlowSection = 'NewFlowSection',
+  NewFlowSectionAfter = 'NewFlowSectionAfter',
+}
+
+export const zIndex = (nodeName: ZIndexNodeName) => {
+  switch (nodeName) {
+    case ZIndexNodeName.SidebarContainer:
+      return 'z-index: 10;'
+    case ZIndexNodeName.NewFlowSection:
+      return 'z-index: 5;'
+    case ZIndexNodeName.NewFlowSectionAfter:
+      return 'z-index: -5;'
+    default:
+      return 'z-index: 0;'
+  }
+}
diff --git a/src/dataTable/DataTable.tsx b/src/dataTable/DataTable.tsx
index 0e6096dd8..7fe7a496b 100644
--- a/src/dataTable/DataTable.tsx
+++ b/src/dataTable/DataTable.tsx
@@ -74,22 +74,23 @@ const tableDataStyles: (props: TableDataType) => SimpleInterpolation = ({
 
 // Main Wrapper
 
-export const TableContainer = styled<CommonComponentType, 'div'>('div')`
-  ${flexFlow()};
+export const TableContainer = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  height: 100%;
-  overflow: hidden;
+    height: 100%;
+    overflow: hidden;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 // Header Components
 
-export const TableHeaderContainer = styled<
-  CommonComponentType & TableSizeType,
-  'div'
->('div')`
-  ${({
+export const TableHeaderContainer = styled.div<
+  CommonComponentType & TableSizeType
+>(
+  ({
     collapsible = false,
     cssOverrides,
     dense = false,
@@ -105,14 +106,13 @@ export const TableHeaderContainer = styled<
     min-height: 32px;
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
-export const TableHeaderData = styled<
-  CommonComponentType & TableDataType & { hasSorter?: boolean },
-  'div'
->('div')`
-  ${({ cssOverrides, flex, hasSorter = false, textAlign, width }) => css`
+export const TableHeaderData = styled.div<
+  CommonComponentType & TableDataType & { hasSorter?: boolean }
+>(
+  ({ cssOverrides, flex, hasSorter = false, textAlign, width }) => css`
     ${flexFlow('row')};
     ${typography(500, FontSizes.Title5)};
 
@@ -134,25 +134,26 @@ export const TableHeaderData = styled<
       `};
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
 // Body Components
 
-export const TableBody = styled<CommonComponentType, 'div'>('div')`
-  ${flexFlow()};
+export const TableBody = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  flex: 1 1 100%;
-  overflow-y: auto;
+    flex: 1 1 100%;
+    overflow-y: auto;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-export const TableRowContainer = styled<
-  CommonComponentType & TableSizeType,
-  'div'
->('div')`
-  ${({
+export const TableRowContainer = styled.div<
+  CommonComponentType & TableSizeType
+>(
+  ({
     collapsible = false,
     cssOverrides,
     dense = false,
@@ -178,13 +179,11 @@ export const TableRowContainer = styled<
     }
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
-export const TableRowData = styled<CommonComponentType & TableDataType, 'div'>(
-  'div',
-)`
-  ${({ textAlign, width, flex, cssOverrides }) => css`
+export const TableRowData = styled.div<CommonComponentType & TableDataType>(
+  ({ textAlign, width, flex, cssOverrides }) => css`
     ${flexFlow('row')};
     ${typography(400, FontSizes.Title5)};
 
@@ -196,14 +195,13 @@ export const TableRowData = styled<CommonComponentType & TableDataType, 'div'>(
     ${tableDataStyles({ textAlign, width, flex })};
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
-export const TableRowGroupHeader = styled<
-  CommonComponentType & TableSizeType,
-  'div'
->('div')`
-  ${({
+export const TableRowGroupHeader = styled.div<
+  CommonComponentType & TableSizeType
+>(
+  ({
     collapsible = false,
     cssOverrides,
     dense = false,
@@ -218,8 +216,8 @@ export const TableRowGroupHeader = styled<
     user-select: none;
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
 export const TableEmptyMessage = styled.div`
   padding: 16px;
@@ -229,11 +227,10 @@ export const TableEmptyMessage = styled.div`
 
 // Table Footer
 
-export const TableFooterContainer = styled<
-  CommonComponentType & TableSizeType,
-  'div'
->('div')`
-  ${({
+export const TableFooterContainer = styled.div<
+  CommonComponentType & TableSizeType
+>(
+  ({
     collapsible = false,
     cssOverrides,
     dense = false,
@@ -248,12 +245,16 @@ export const TableFooterContainer = styled<
     height: 24px;
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
-export const TableFooterMeta = styled<CommonComponentType, 'div'>('div')`
-  ${typography(400, FontSizes.Title5)};
+export const TableFooterMeta = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${typography(400, FontSizes.Title5)};
 
-  color: ${colors(Colors.Black74)};
-  margin-left: auto;
-`
+    color: ${colors(Colors.Black74)};
+    margin-left: auto;
+
+    ${cssOverrides};
+  `,
+)
diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx
index 5ebafa60a..550d4c03a 100644
--- a/src/divider/Divider.tsx
+++ b/src/divider/Divider.tsx
@@ -7,9 +7,9 @@ import { CommonComponentType } from '@monorail/types'
 * Styles
 */
 
-export const Divider = styled<CCDividerProps, 'div'>('div')`
-  ${({ isVertical = false }) =>
-    isVertical
+export const Divider = styled.div<CCDividerProps>(
+  ({ isVertical }) => css`
+    ${isVertical
       ? css`
         width: 1px
         height: 100%;
@@ -19,8 +19,9 @@ export const Divider = styled<CCDividerProps, 'div'>('div')`
           height: 1px;
         `};
 
-  background: ${colors(Colors.Grey94)};
-`
+    background: ${colors(Colors.Grey94)};
+  `,
+)
 
 Divider.defaultProps = {
   isVertical: false,
diff --git a/src/errorPage/ErrorPage.tsx b/src/errorPage/ErrorPage.tsx
index b9631e3b4..03520f271 100644
--- a/src/errorPage/ErrorPage.tsx
+++ b/src/errorPage/ErrorPage.tsx
@@ -1,6 +1,8 @@
 import React, { Component, ReactNode } from 'react'
 import styled from 'styled-components'
+import { ErrorType } from '@monorail/errorPage/errorTypes'
 import { Icon } from '@monorail/icon/Icon'
+import { TypeOf } from 'io-ts'
 import {
   Colors,
   colors,
@@ -8,27 +10,27 @@ import {
   FontSizes,
   typography,
 } from '@monorail/CommonStyles'
-import { ErrorType } from '@monorail/errorPage/errorTypes'
-import { TypeOf } from 'io-ts'
 
 /*
 * Styles
 */
 
-const CCErrorPage = styled('div')`
+const CCErrorPage = styled.div`
   ${flexFlow('column')};
-  justify-content: center;
+
   align-items: center;
-  width: 100%;
   height: 100%;
+  justify-content: center;
+  width: 100%;
 `
 
-const IconCircle = styled('div')`
+const IconCircle = styled.div`
   ${flexFlow('column')};
-  width: 120px;
-  height: 120px;
+
   background: #ed6d6e;
   border-radius: 50%;
+  height: 120px;
+  width: 120px;
 `
 
 const StyledIcon = styled(Icon)`
@@ -36,25 +38,27 @@ const StyledIcon = styled(Icon)`
   margin: auto auto;
 `
 
-const FourZeroFourIcon = styled('div')`
+const FourZeroFourIcon = styled.div`
   color: #ed6d6e;
   font-size: 88px;
   font-weight: 500;
   margin: auto auto;
 `
 
-const Title = styled('h1')`
+const Title = styled.h1`
   ${typography(700, FontSizes.Title1)};
+
   color: ${colors(Colors.Black89)};
   margin: 32px 0 32px 0;
 `
 
-const ErrorMessage = styled('div')`
+const ErrorMessage = styled.div`
   ${typography(400, FontSizes.Title3)};
+
   color: ${colors(Colors.Black89)};
+  max-width: 448px;
   text-align: center;
   width: 100%;
-  max-width: 448px;
 `
 
 /*
@@ -62,9 +66,9 @@ const ErrorMessage = styled('div')`
 */
 
 type ErrorPageProps = {
+  errorMessage?: ReactNode
   errorType: ErrorType
   title?: ReactNode
-  errorMessage?: ReactNode
 }
 
 /*
diff --git a/src/filters/Filter.tsx b/src/filters/Filter.tsx
index a423645ba..11e6ecdd3 100644
--- a/src/filters/Filter.tsx
+++ b/src/filters/Filter.tsx
@@ -1,5 +1,5 @@
 import React, { Component, ReactNode } from 'react'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 import styled, { css, SimpleInterpolation } from 'styled-components'
 
 import { Icon } from '@monorail/icon/Icon'
@@ -17,30 +17,31 @@ import {
 import { PopOver } from '@monorail/popOver/PopOver'
 import { Menu } from '@monorail/menu/Menu'
 
-const CCFilter = styled<CCFilterProps, 'div'>('div')`
-  ${({ isOpen, isActive }) =>
-    isActive || isOpen
+const CCFilter = styled.div<CCFilterProps>(
+  ({ isOpen, isActive, cssOverrides }) => css`
+    ${isActive || isOpen
       ? basePrimaryStyles(Colors.BrandDarkBlue)
       : css`
           ${baseSecondaryStyles(Colors.BrandDarkBlue, isOpen)};
           color: ${colors(Colors.Black74)};
         `};
 
-  ${borderRadius()};
-  ${buttonTransition};
-  ${flexFlow('row')};
+    ${borderRadius()};
+    ${buttonTransition};
+    ${flexFlow('row')};
 
-  align-items: center;
-  cursor: pointer;
-  height: 24px;
-  padding: 0 4px 0 8px;
-  user-select: none;
-  flex-shrink: 0; /* Needs this for IE11 but not Chrome. */
+    align-items: center;
+    cursor: pointer;
+    height: 24px;
+    padding: 0 4px 0 8px;
+    user-select: none;
+    flex-shrink: 0; /* Needs this for IE11 but not Chrome. */
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-const FilterText = styled('span')`
+const FilterText = styled.span`
   ${typography(700, FontSizes.Title5)};
 
   color: currentColor;
@@ -63,11 +64,19 @@ type Props = CCFilterProps & {
   document?: Document
   title: ReactNode
   content: ReactNode
+  zIndex?: number
 }
 
 export class Filter extends Component<Props> {
   render() {
-    const { cssOverrides, title, content, isActive, ...otherProps } = this.props
+    const {
+      cssOverrides,
+      title,
+      content,
+      isActive,
+      zIndex,
+      ...otherProps
+    } = this.props
 
     return (
       <PopOver
@@ -78,7 +87,13 @@ export class Filter extends Component<Props> {
             <FilterIcon icon="arrow_drop_down" />
           </CCFilter>
         )}
-        popOver={props => !isNil(content) && <Menu {...props}>{content}</Menu>}
+        popOver={props =>
+          !isNil(content) && (
+            <Menu zIndex={zIndex} {...props}>
+              {content}
+            </Menu>
+          )
+        }
       />
     )
   }
diff --git a/src/filters/FilterBar.tsx b/src/filters/FilterBar.tsx
index b26af1a54..f4a84ee18 100644
--- a/src/filters/FilterBar.tsx
+++ b/src/filters/FilterBar.tsx
@@ -1,10 +1,18 @@
-import { prop } from '@monorail/CoreUtils/Record'
-import { len } from '@monorail/CoreUtils/Array'
-import { fold } from '@monorail/CoreUtils/Option'
+import { prop } from '@monorail/sharedHelpers/fp-ts-ext/Record'
+import { len } from '@monorail/sharedHelpers/fp-ts-ext/Array'
+import { fold } from '@monorail/sharedHelpers/fp-ts-ext/Option'
 import { array, head } from 'fp-ts/lib/Array'
 import React, { Component, ReactNode } from 'react'
 import styled, { css, SimpleInterpolation } from 'styled-components'
-
+import { Button } from '@monorail/buttons/Button'
+import { ButtonDisplay, ButtonSize } from '@monorail/buttons/buttonTypes'
+import { Choice } from '@monorail/inputs/Choice'
+import { CommonComponentType } from '@monorail/types'
+import { Div } from '@monorail/StyleHelpers'
+import { Filter } from '@monorail/filters/Filter'
+import { FilterGroupWithData, SorterGroup } from './types'
+import { Search } from '@monorail/inputs/Search'
+import { Status } from '@monorail/status/Status'
 import {
   ease,
   flexFlow,
@@ -12,16 +20,6 @@ import {
   typography,
   FontSizes,
 } from '@monorail/CommonStyles'
-import { Div } from '@monorail/StyleHelpers'
-
-import { Filter } from '@monorail/filters/Filter'
-import { Search } from '@monorail/inputs/Search'
-import { Choice } from '@monorail/inputs/Choice'
-import { Status } from '@monorail/status/Status'
-import { Button } from '@monorail/buttons/Button'
-
-import { FilterGroupWithData, SorterGroup } from './types'
-import { ButtonDisplay, ButtonSize } from '@monorail/buttons/buttonTypes'
 
 const sorterItemStyle = (selected: boolean) => css`
   ${typography(500, FontSizes.Content)};
@@ -39,15 +37,15 @@ const sorterItemStyle = (selected: boolean) => css`
   }
 `
 
-const BBFilterBar = styled<{ cssOverrides?: SimpleInterpolation }, 'div'>(
-  'div',
-)`
-  ${flexFlow('row')};
+const BBFilterBar = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow('row')};
 
-  margin-left: -4px;
+    margin-left: -4px;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 type Props<
   CollectionItem extends object,
@@ -90,7 +88,10 @@ export class FilterBar<
         </>
       )
     } else if (filterGroup.activeFilterCount === 1) {
-      const headFilterOpt = head(filterGroup.filters)
+      // Get checked filter option
+      const headFilterOpt = head(
+        filterGroup.filters.filter(item => item.checked),
+      )
       const activeFilterLabel = fold(headFilterOpt, '', prop('label'))
       // If equal to 1, show the label and the single active filter
       return `${filterGroup.label} - ${activeFilterLabel}`
diff --git a/src/filters/FilterCollection.tsx b/src/filters/FilterCollection.tsx
index ebe03b6ce..ff19417c8 100644
--- a/src/filters/FilterCollection.tsx
+++ b/src/filters/FilterCollection.tsx
@@ -1,10 +1,10 @@
-import { mkIO, runIO } from '@monorail/CoreUtils/IO'
-import { constVoid, o } from '@monorail/CoreUtils/general'
-import { mkRecordKeyOptional } from '@monorail/CoreUtils/optics'
-import { findIndex, toLocaleLower } from '@monorail/CoreUtils/String'
-import { len, map, notAny } from '@monorail/CoreUtils/Array'
-import { fold } from '@monorail/CoreUtils/Option'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { newIO, runIO } from '@monorail/sharedHelpers/fp-ts-ext/IO'
+import { constVoid, o } from '@monorail/sharedHelpers/fp-ts-ext/function'
+import { mkRecordKeyOptional } from '@monorail/sharedHelpers/optics'
+import { findIndex, toLower } from '@monorail/sharedHelpers/strings'
+import { len, map, notAny } from '@monorail/sharedHelpers/fp-ts-ext/Array'
+import { fold } from '@monorail/sharedHelpers/fp-ts-ext/Option'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 import { array, findFirst, snoc } from 'fp-ts/lib/Array'
 import { constant } from 'fp-ts/lib/function'
 import { isNone, Option, fromNullable } from 'fp-ts/lib/Option'
@@ -159,9 +159,9 @@ export class FilterCollection<
       s.key === key || s.selected ? { ...s, selected: !s.selected } : s
 
     const transition = this.stateToSortersOptional.modify(map(toggleSelected))
-    const setStateIO = mkIO(() => this.setState(transition))
+    const setStateIO = newIO(() => this.setState(transition))
     const constSetStateIO = constant(setStateIO)
-    const noOpIO = mkIO(constVoid)
+    const noOpIO = newIO(constVoid)
 
     const onSorterChangeIO = sorterGroupOpt.fold(noOpIO, constSetStateIO)
 
@@ -174,21 +174,21 @@ export class FilterCollection<
       .composeOptional(mkRecordKeyOptional(filterKey))
 
     const transition = stateToFilterKeyOptional.set(value)
-    const setStateIO = mkIO(() => this.setState(transition))
+    const setStateIO = newIO(() => this.setState(transition))
 
     runIO(setStateIO)
   }
 
   resetFilters = () => {
     const transition = this.stateToFilterStateLens.set(this.initialFilterState)
-    const setStateIO = mkIO(() => this.setState(transition))
+    const setStateIO = newIO(() => this.setState(transition))
 
     runIO(setStateIO)
   }
 
   onSearchChange = (searchText: string) => {
     const transition = this.stateToSearchTextLens.set(searchText)
-    const setStateIO = mkIO(() => this.setState(transition))
+    const setStateIO = newIO(() => this.setState(transition))
 
     runIO(setStateIO)
   }
@@ -204,7 +204,7 @@ export class FilterCollection<
     const { searchText, filterState } = this.state
 
     // sanitize search text
-    const sanitizedSearchText = toLocaleLower(searchText)
+    const sanitizedSearchText = toLower(searchText)
 
     // Here we loop through all the filter groups and filter out the
     // filters that are unchecked. This is an optimization so
@@ -240,10 +240,7 @@ export class FilterCollection<
       // If search exists and item does not match, filter it out
       const searchValue = catalogItem[searchByKey]
 
-      const findIndexLocaleLower = o(
-        findIndex(sanitizedSearchText),
-        toLocaleLower,
-      )
+      const findIndexLocaleLower = o(findIndex(sanitizedSearchText), toLower)
       const isNotFound = o(
         (x: Option<number>) => isNone(x),
         findIndexLocaleLower,
diff --git a/src/globalAppTheme.ts b/src/globalAppTheme.ts
index 2161f55b8..9b39755c1 100644
--- a/src/globalAppTheme.ts
+++ b/src/globalAppTheme.ts
@@ -1,5 +1,5 @@
 import { Colors } from '@monorail/CommonStyles'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 export interface GlobalAppThemeInterface {
   linkColor: Colors
diff --git a/src/header/Header.tsx b/src/header/Header.tsx
index a401ee35c..8611a052a 100644
--- a/src/header/Header.tsx
+++ b/src/header/Header.tsx
@@ -13,18 +13,20 @@ import {
   typography,
 } from '@monorail/CommonStyles'
 
-const HeaderRow = styled.div<CommonComponentType>`
-  color: ${colors(Colors.BrandDarkBlue)};
-  ${flexFlow('row')};
-  ${typography(500, FontSizes.Title3)};
+const HeaderRow = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    color: ${colors(Colors.BrandDarkBlue)};
+    ${flexFlow('row')};
+    ${typography(500, FontSizes.Title3)};
 
-  align-items: center;
-  flex-shrink: 0;
-  height: 48px;
-  padding: 0 16px;
+    align-items: center;
+    flex-shrink: 0;
+    height: 48px;
+    padding: 0 16px;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 const iconRightCss = css`
   color: ${colors(Colors.BrandDarkBlue)};
@@ -44,10 +46,10 @@ type Props = CommonComponentType & {
   cssHeaderRow?: SimpleInterpolation
   iconLeft?: string
   noBorder?: boolean
-  title: string
+  title: ReactNode
 }
 
-export const Header = styled<Props>(
+export const Header = styled(
   ({
     actions,
     appIcon,
@@ -70,8 +72,8 @@ export const Header = styled<Props>(
       {children}
     </div>
   ),
-)`
-  ${({ noBorder, appIcon, cssOverrides }) => css`
+)<Props>(
+  ({ noBorder, appIcon, cssOverrides }) => css`
     ${!noBorder &&
       css`
         &::after {
@@ -92,5 +94,5 @@ export const Header = styled<Props>(
     flex-shrink: 0;
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
diff --git a/src/icon/Icon.tsx b/src/icon/Icon.tsx
index b501d820e..d464d0565 100644
--- a/src/icon/Icon.tsx
+++ b/src/icon/Icon.tsx
@@ -1,19 +1,35 @@
-import { Colors, colors } from '@monorail/CommonStyles'
+import React, { ComponentType, MouseEvent } from 'react'
+import styled, {
+  css,
+  SimpleInterpolation,
+  createGlobalStyle,
+} from 'styled-components'
 import { Academy } from '@monorail/icon/custom/Academy'
 import { Admin } from '@monorail/icon/custom/Admin'
 import { Catalog } from '@monorail/icon/custom/Catalog'
 import { Certificate } from '@monorail/icon/custom/Certificate'
 import { ChevronDoubleLeft } from '@monorail/icon/custom/ChevronDoubleLeft'
 import { CircleArrowLeft } from '@monorail/icon/custom/CircleArrowLeft'
+import {
+  Colors,
+  colors,
+  convertAppNameToString,
+  isAppName,
+} from '@monorail/CommonStyles'
 import { Dashboard } from '@monorail/icon/custom/Dashboard'
 import { ErrorRobot } from '@monorail/icon/custom/ErrorRobot'
+import { EventDesign } from '@monorail/icon/custom/EventDesign'
+import { Events } from '@monorail/icon/custom/Events'
 import { Filter } from '@monorail/icon/custom/Filter'
 import { Gauge } from '@monorail/icon/custom/Gauge'
 import { Hardhat } from '@monorail/icon/custom/Hardhat'
+import { Home } from '@monorail/icon/custom/Home'
 import { Impact } from '@monorail/icon/custom/Impact'
 import { LMS } from '@monorail/icon/custom/LMS'
+import { Omit } from 'typelevel-ts'
 import { Range } from '@monorail/icon/custom/Range'
 import { Retry } from '@monorail/icon/custom/Retry'
+import { Robot } from '@monorail/icon/custom/Robot'
 import { ServerNetwork } from '@monorail/icon/custom/ServerNetwork'
 import { SortAscending } from '@monorail/icon/custom/SortAscending'
 import { SortDescending } from '@monorail/icon/custom/SortDescending'
@@ -25,13 +41,6 @@ import { ThreeGears } from '@monorail/icon/custom/ThreeGears'
 import { Tracker } from '@monorail/icon/custom/Tracker'
 import { Unscored } from '@monorail/icon/custom/Unscored'
 import { VCenter } from '@monorail/icon/custom/VCenter'
-import React, { ComponentType, MouseEvent } from 'react'
-import styled, {
-  css,
-  SimpleInterpolation,
-  createGlobalStyle,
-} from 'styled-components'
-import { Omit } from 'typelevel-ts'
 
 // https://fonts.googleapis.com/icon?family=Material+Icons&style=baseline
 export const MaterialIconFontFace = createGlobalStyle`
@@ -50,39 +59,45 @@ export const MaterialIconFontFace = createGlobalStyle`
 
 // TODO: Refactor [key: string] to more concrete type
 const customIcons: { [key: string]: ComponentType<CustomIconProps> } = {
-  academy: Academy,
-  admin: Admin,
-  catalog: Catalog,
+  'academy-app': Academy,
+  'admin-app': Admin,
+  'catalog-app': Catalog,
+  'dashboard-app': Dashboard,
+  'event-design-app': EventDesign,
+  'events-app': Events,
+  'externalLms-app': LMS,
+  'hardhat-app': Hardhat,
+  'home-app': Home,
+  'impact-app': Impact,
+  'range-app': Range,
+  'repo-app': Catalog,
+  'techops-app': TechOps,
+  'tracker-app': Tracker,
+  'training-app': Academy,
   certificate: Certificate,
   chevron_double_left: ChevronDoubleLeft,
   circle_arrow_left: CircleArrowLeft,
-  dashboard: Dashboard,
   errorRobot: ErrorRobot,
-  externalLms: LMS,
   filter: Filter,
   gauge: Gauge,
-  hardhat: Hardhat,
-  impact: Impact,
-  range: Range,
-  repo: Catalog,
+  retry: Retry,
+  robot: Robot,
   server_network: ServerNetwork,
   sort_ascending: SortAscending,
   sort_descending: SortDescending,
-  techops: TechOps,
+  star_filled: StarFilled,
+  star_half: StarHalf,
+  star_outline: StarOutline,
   threeGears: ThreeGears,
-  tracker: Tracker,
-  training: Academy,
   unscored: Unscored,
   vcenter: VCenter,
-  retry: Retry,
-  star_filled: StarFilled,
-  star_outline: StarOutline,
-  star_half: StarHalf,
 }
 
-export const Icon = styled<IconProps>(
+export const Icon = styled(
   ({ cssOverrides: _cssOverrides, icon, ...otherProps }: IconProps) => {
-    const CustomIcon = customIcons[icon]
+    const CustomIcon =
+      customIcons[icon] ||
+      (isAppName(icon) && customIcons[`${convertAppNameToString(icon)}-app`])
 
     if (CustomIcon) {
       return <CustomIcon {...otherProps} />
@@ -90,9 +105,9 @@ export const Icon = styled<IconProps>(
 
     return <i {...otherProps}>{icon}</i>
   },
-)`
-  ${({ size }) =>
-    size
+)<IconProps>(
+  ({ size, cssOverrides }) => css`
+    ${size
       ? css`
           font-size: ${size}px;
         `
@@ -100,36 +115,37 @@ export const Icon = styled<IconProps>(
           font-size: 16px;
         `};
 
-  color: ${colors(Colors.Black54)};
-  direction: ltr;
-  display: inline-block;
-  fill: currentColor; /* Custom icons are svg and need this so that color works correct. */
-  flex-shrink: 0; /* Fixes custom icons shrinking when font icons wont. */
-  font-family: 'Material Icons'; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
-  font-style: normal;
-  font-weight: normal;
-  height: 1em;
-  letter-spacing: normal;
-  line-height: 1;
-  text-transform: none;
-  user-select: none;
-  white-space: nowrap;
-  width: 1em;
-  word-wrap: normal;
+    color: ${colors(Colors.Black54)};
+    direction: ltr;
+    display: inline-block;
+    fill: currentColor; /* Custom icons are svg and need this so that color works correct. */
+    flex-shrink: 0; /* Fixes custom icons shrinking when font icons wont. */
+    font-family: 'Material Icons'; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+    font-style: normal;
+    font-weight: normal;
+    height: 1em;
+    letter-spacing: normal;
+    line-height: 1;
+    text-transform: none;
+    user-select: none;
+    white-space: nowrap;
+    width: 1em;
+    word-wrap: normal;
 
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
 
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
 
-  /* Support for IE. */
-  font-feature-settings: 'liga';
+    /* Support for IE. */
+    font-feature-settings: 'liga';
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 export type IconProps = {
   className?: string
diff --git a/src/icon/custom/EventDesign.tsx b/src/icon/custom/EventDesign.tsx
new file mode 100644
index 000000000..1ea68d063
--- /dev/null
+++ b/src/icon/custom/EventDesign.tsx
@@ -0,0 +1,32 @@
+import React, { ComponentType } from 'react'
+import { CustomIconProps } from '@monorail/icon/Icon'
+
+export const EventDesign: ComponentType<CustomIconProps> = props => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.4286 5.71429H10V6.57143C10 7.04482 9.61624 7.42857 9.14286 7.42857H7.42857C6.95518 7.42857 6.57143 7.04482 6.57143 6.57143V5.71429H5.71429C4.76751 5.71429 4 6.4818 4 7.42857V17.7143C4 18.6611 4.76751 19.4286 5.71429 19.4286H10.8571V17.7143H5.71429V9.14286H17.7143V10.8571H19.4286V7.42857C19.4286 6.4818 18.6611 5.71429 17.7143 5.71429H16.8571V6.57143C16.8571 7.04482 16.4734 7.42857 16 7.42857H14.2857C13.8123 7.42857 13.4286 7.04482 13.4286 6.57143V5.71429Z"
+      fill="#161C4F"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.9217 17.2857C20.9217 17.446 20.9071 17.5969 20.8878 17.7477L21.9104 18.5256C22.0025 18.5963 22.0267 18.7236 21.9685 18.8273L20.9992 20.4584C20.9411 20.5621 20.8151 20.6046 20.7036 20.5621L19.4968 20.0907C19.2448 20.2746 18.9734 20.4349 18.6777 20.5527L18.4936 21.802C18.479 21.9151 18.3773 22 18.2561 22H16.3175C16.1963 22 16.0945 21.9151 16.08 21.802L15.8958 20.5527C15.6002 20.4349 15.3288 20.2793 15.0768 20.0907L13.87 20.5621C13.7634 20.5999 13.6325 20.5621 13.5743 20.4584L12.605 18.8273C12.5469 18.7236 12.5711 18.5963 12.6632 18.5256L13.6858 17.7477C13.6664 17.5969 13.6519 17.4413 13.6519 17.2857C13.6519 17.1301 13.6664 16.9746 13.6858 16.8237L12.6632 16.0459C12.5711 15.9751 12.542 15.8479 12.605 15.7441L13.5743 14.113C13.6325 14.0093 13.7585 13.9669 13.87 14.0093L15.0768 14.4807C15.3288 14.2969 15.6002 14.1366 15.8958 14.0187L16.08 12.7694C16.0945 12.6563 16.1963 12.5714 16.3175 12.5714H18.2561C18.3773 12.5714 18.479 12.6563 18.4936 12.7694L18.6777 14.0187C18.9734 14.1366 19.2448 14.2921 19.4968 14.4807L20.7036 14.0093C20.8102 13.9716 20.9411 14.0093 20.9992 14.113L21.9685 15.7441C22.0267 15.8479 22.0025 15.9751 21.9104 16.0459L20.8878 16.8237C20.9071 16.9746 20.9217 17.1254 20.9217 17.2857ZM15.5906 17.2857C15.5906 18.1956 16.3515 18.9357 17.2869 18.9357C18.2223 18.9357 18.9832 18.1956 18.9832 17.2857C18.9832 16.3759 18.2223 15.6357 17.2869 15.6357C16.3515 15.6357 15.5906 16.3759 15.5906 17.2857Z"
+      fill="#161C4F"
+    />
+    <path
+      d="M7.42857 4.42857C7.42857 4.19188 7.62045 4 7.85714 4H8.71429C8.95098 4 9.14286 4.19188 9.14286 4.42857V6.14286C9.14286 6.37955 8.95098 6.57143 8.71429 6.57143H7.85714C7.62045 6.57143 7.42857 6.37955 7.42857 6.14286V4.42857Z"
+      fill="#161C4F"
+    />
+    <path
+      d="M14.2857 4.42857C14.2857 4.19188 14.4776 4 14.7143 4H15.5714C15.8081 4 16 4.19188 16 4.42857V6.14286C16 6.37955 15.8081 6.57143 15.5714 6.57143H14.7143C14.4776 6.57143 14.2857 6.37955 14.2857 6.14286V4.42857Z"
+      fill="#161C4F"
+    />
+  </svg>
+)
diff --git a/src/icon/custom/Events.tsx b/src/icon/custom/Events.tsx
new file mode 100644
index 000000000..4f4fe4011
--- /dev/null
+++ b/src/icon/custom/Events.tsx
@@ -0,0 +1,30 @@
+import React, { ComponentType } from 'react'
+import { CustomIconProps } from '@monorail/icon/Icon'
+
+export const Events: ComponentType<CustomIconProps> = props => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.4286 5.71429H10V6.57143C10 7.04482 9.61624 7.42857 9.14286 7.42857H7.42857C6.95518 7.42857 6.57143 7.04482 6.57143 6.57143V5.71429H5.71429C4.76751 5.71429 4 6.4818 4 7.42857V17.7143C4 18.6611 4.76751 19.4286 5.71429 19.4286H13V17.7143H5.71429V9.14286H17.7143V10.8571H19.4286V7.42857C19.4286 6.4818 18.6611 5.71429 17.7143 5.71429H16.8571V6.57143C16.8571 7.04482 16.4734 7.42857 16 7.42857H14.2857C13.8123 7.42857 13.4286 7.04482 13.4286 6.57143V5.71429Z"
+      fill="#161C4F"
+    />
+    <path
+      d="M7.42857 4.42857C7.42857 4.19188 7.62045 4 7.85714 4H8.71429C8.95098 4 9.14286 4.19188 9.14286 4.42857V6.14286C9.14286 6.37955 8.95098 6.57143 8.71429 6.57143H7.85714C7.62045 6.57143 7.42857 6.37955 7.42857 6.14286V4.42857Z"
+      fill="#161C4F"
+    />
+    <path
+      d="M14.2857 4.42857C14.2857 4.19188 14.4776 4 14.7143 4H15.5714C15.8081 4 16 4.19188 16 4.42857V6.14286C16 6.37955 15.8081 6.57143 15.5714 6.57143H14.7143C14.4776 6.57143 14.2857 6.37955 14.2857 6.14286V4.42857Z"
+      fill="#161C4F"
+    />
+    <path
+      d="M14.7143 17.2857L17.1429 12.5714H22L18.9643 15.5179H21.9533L14.7143 22L17.1429 17.2857H14.7143Z"
+      fill="#161C4F"
+    />
+  </svg>
+)
diff --git a/src/icon/custom/Home.tsx b/src/icon/custom/Home.tsx
new file mode 100644
index 000000000..2656a7bc2
--- /dev/null
+++ b/src/icon/custom/Home.tsx
@@ -0,0 +1,19 @@
+import React, { ComponentType } from 'react'
+import { CustomIconProps } from '@monorail/icon/Icon'
+
+export const Home: ComponentType<CustomIconProps> = props => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.2 20V14.6667H13.8V20H18.3V12.8889H21L12 4L3 12.8889H5.7V20H10.2Z"
+      fill="#161C4F"
+    />
+    <path d="M14.7 4H16.5V9.33333H14.7V4Z" fill="#161C4F" />
+  </svg>
+)
diff --git a/src/icon/custom/Robot.tsx b/src/icon/custom/Robot.tsx
new file mode 100644
index 000000000..b9d3dbf70
--- /dev/null
+++ b/src/icon/custom/Robot.tsx
@@ -0,0 +1,15 @@
+import React, { ComponentType } from 'react'
+import { CustomIconProps } from '@monorail/icon/Icon'
+
+export const Robot: ComponentType<CustomIconProps> = props => (
+  <svg
+    width="16"
+    height="14"
+    viewBox="0 0 16 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M7.99984 0.333496C8.35346 0.333496 8.6926 0.473972 8.94265 0.72402C9.19269 0.974069 9.33317 1.31321 9.33317 1.66683C9.33317 2.16016 9.0665 2.5935 8.6665 2.82016V3.66683H9.33317C10.5708 3.66683 11.7578 4.1585 12.633 5.03366C13.5082 5.90883 13.9998 7.09582 13.9998 8.3335H14.6665C14.8433 8.3335 15.0129 8.40373 15.1379 8.52876C15.2629 8.65378 15.3332 8.82335 15.3332 9.00016V11.0002C15.3332 11.177 15.2629 11.3465 15.1379 11.4716C15.0129 11.5966 14.8433 11.6668 14.6665 11.6668H13.9998V12.3335C13.9998 12.6871 13.8594 13.0263 13.6093 13.2763C13.3593 13.5264 13.0201 13.6668 12.6665 13.6668H3.33317C2.97955 13.6668 2.64041 13.5264 2.39036 13.2763C2.14031 13.0263 1.99984 12.6871 1.99984 12.3335V11.6668H1.33317C1.15636 11.6668 0.98679 11.5966 0.861766 11.4716C0.736742 11.3465 0.666504 11.177 0.666504 11.0002V9.00016C0.666504 8.82335 0.736742 8.65378 0.861766 8.52876C0.98679 8.40373 1.15636 8.3335 1.33317 8.3335H1.99984C1.99984 7.09582 2.4915 5.90883 3.36667 5.03366C4.24184 4.1585 5.42883 3.66683 6.6665 3.66683H7.33317V2.82016C6.93317 2.5935 6.6665 2.16016 6.6665 1.66683C6.6665 1.31321 6.80698 0.974069 7.05703 0.72402C7.30708 0.473972 7.64621 0.333496 7.99984 0.333496ZM4.99984 7.66683C4.55781 7.66683 4.13389 7.84242 3.82133 8.15499C3.50877 8.46755 3.33317 8.89147 3.33317 9.3335C3.33317 9.77552 3.50877 10.1994 3.82133 10.512C4.13389 10.8246 4.55781 11.0002 4.99984 11.0002C5.44186 11.0002 5.86579 10.8246 6.17835 10.512C6.49091 10.1994 6.6665 9.77552 6.6665 9.3335C6.6665 8.89147 6.49091 8.46755 6.17835 8.15499C5.86579 7.84242 5.44186 7.66683 4.99984 7.66683ZM10.9998 7.66683C10.5578 7.66683 10.1339 7.84242 9.82133 8.15499C9.50876 8.46755 9.33317 8.89147 9.33317 9.3335C9.33317 9.77552 9.50876 10.1994 9.82133 10.512C10.1339 10.8246 10.5578 11.0002 10.9998 11.0002C11.4419 11.0002 11.8658 10.8246 12.1783 10.512C12.4909 10.1994 12.6665 9.77552 12.6665 9.3335C12.6665 8.89147 12.4909 8.46755 12.1783 8.15499C11.8658 7.84242 11.4419 7.66683 10.9998 7.66683Z" />
+  </svg>
+)
diff --git a/src/inputs/CheckmarkSelectGroup.tsx b/src/inputs/CheckmarkSelectGroup.tsx
index 0787659af..f6eff24aa 100644
--- a/src/inputs/CheckmarkSelectGroup.tsx
+++ b/src/inputs/CheckmarkSelectGroup.tsx
@@ -4,30 +4,30 @@ import styled, { css, SimpleInterpolation } from 'styled-components'
 import { SelectOption, Select } from './Select'
 import { typography, FontSizes } from '@monorail/CommonStyles'
 import { Choice } from './Choice'
+import { CommonComponentType } from '@monorail/types'
 
-const CheckmarkSelectGroupWrapper = styled<
-  { cssOverrides?: SimpleInterpolation },
-  'div'
->('div')`
-  ${({ cssOverrides }) => cssOverrides};
-`
+const CheckmarkSelectGroupWrapper = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${cssOverrides};
+  `,
+)
 
 const Label = styled.p`
   ${typography(500, FontSizes.Title5)};
+
   margin-bottom: 4px;
   height: 16px;
 `
 
-const CheckmarkSelectWrapper = styled<
-  { cssOverrides?: SimpleInterpolation },
-  'div'
->('div')`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  ${({ cssOverrides }) => cssOverrides};
-`
+const CheckmarkSelectWrapper = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    ${cssOverrides};
+  `,
+)
 
 const CheckmarkSelectLabel = styled.p`
   ${typography(500, FontSizes.Title5)};
diff --git a/src/inputs/Choice.tsx b/src/inputs/Choice.tsx
index 5438c3edd..648d1ec7b 100644
--- a/src/inputs/Choice.tsx
+++ b/src/inputs/Choice.tsx
@@ -18,101 +18,102 @@ import styled, { css, SimpleInterpolation } from 'styled-components'
 * Styles
 */
 
-const BBChoiceInput = styled<BBChoiceInputProps, 'input'>('input')`
+const BBChoiceInput = styled.input<BBChoiceInputProps>`
   opacity: 0; /* Hiding the input. */
   position: absolute; /* position: absolute; so that the Icons can be position: absolute; and so that the input doesn't effect the layout. */
   z-index: -1;
 `
 
-const BBChoiceFakeLabel = styled<AnsweredProps, 'div'>('div')`
-  ${({ answered }) =>
-    answered &&
-    css`
-      transform: translateX(24px);
-    `};
+const BBChoiceFakeLabel = styled.div<AnsweredProps>(
+  ({ answered }) => css`
+    ${answered &&
+      css`
+        transform: translateX(24px);
+      `};
 
-  ${typography(500, FontSizes.Title5)};
-  flex-grow: 1;
-  word-break: break-word;
+    ${typography(500, FontSizes.Title5)};
+    flex-grow: 1;
+    word-break: break-word;
 
-  transition: all ease 150ms;
-`
-
-const CCChoice = styled<CCChoiceProps, 'label'>('label')`
-  ${({ disabled }) => disabled && baseDisabledStyles};
-
-  ${({ readOnly, incorrect, correct }) =>
-    (readOnly || incorrect || correct) &&
-    css`
-      cursor: default;
-      pointer-events: none;
-    `};
-
-  ${baseChromelessStyles()};
-  ${flexFlow('row')};
-  ${borderRadius()};
-
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  min-height: 24px;
-  padding: 4px 4px 4px 32px;
-  position: relative; /* position: relative; so that the input can be position: absolute; */
-  user-select: none;
-  width: 100%;
-
-  ${buttonTransition};
-
-  .ChoiceButtonChecked {
-    color: ${colors(Colors.BrandLightBlue)};
-
-    transform: translateX(${({ answered }) => (answered ? 24 : 0)}px);
-  }
+    transition: all ease 150ms;
+  `,
+)
+
+const CCChoice = styled.label<CCChoiceProps>(
+  ({ disabled, readOnly, incorrect, correct, cssOverrides, answered }) => css`
+    ${disabled && baseDisabledStyles};
+
+    ${(readOnly || incorrect || correct) &&
+      css`
+        cursor: default;
+        pointer-events: none;
+      `};
+
+    ${baseChromelessStyles()};
+    ${flexFlow('row')};
+    ${borderRadius()};
+
+    align-items: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    min-height: 24px;
+    padding: 4px 4px 4px 32px;
+    position: relative; /* position: relative; so that the input can be position: absolute; */
+    user-select: none;
+    width: 100%;
+
+    ${buttonTransition};
+
+    .ChoiceButtonChecked {
+      color: ${colors(Colors.BrandLightBlue)};
+
+      transform: translateX(${answered ? 24 : 0}px);
+    }
 
-  .ChoiceButtonUnchecked {
-    color: ${colors(Colors.Black54)};
+    .ChoiceButtonUnchecked {
+      color: ${colors(Colors.Black54)};
 
-    transform: translateX(${({ answered }) => (answered ? 24 : 0)}px);
-  }
+      transform: translateX(${answered ? 24 : 0}px);
+    }
 
-  .RealInput:checked ~ .ChoiceButtonChecked {
-    ${visible(true)};
-  }
+    .RealInput:checked ~ .ChoiceButtonChecked {
+      ${visible(true)};
+    }
 
-  .RealInput:checked ~ .ChoiceButtonUnchecked {
-    ${visible(false)};
-  }
+    .RealInput:checked ~ .ChoiceButtonUnchecked {
+      ${visible(false)};
+    }
 
-  .RealInput:not(:checked) ~ .ChoiceButtonChecked {
-    ${visible(false)};
-  }
+    .RealInput:not(:checked) ~ .ChoiceButtonChecked {
+      ${visible(false)};
+    }
 
-  .RealInput:not(:checked) ~ .ChoiceButtonUnchecked {
-    ${visible(true)};
-  }
+    .RealInput:not(:checked) ~ .ChoiceButtonUnchecked {
+      ${visible(true)};
+    }
 
-  .IncorrectIcon {
-    color: ${colors(Colors.Red)};
-    ${({ incorrect }) => visible(incorrect)};
-  }
+    .IncorrectIcon {
+      color: ${colors(Colors.Red)};
+      ${visible(incorrect)};
+    }
 
-  .CorrectIcon {
-    color: ${colors(Colors.Green)};
-    ${({ correct }) => visible(correct)};
-  }
+    .CorrectIcon {
+      color: ${colors(Colors.Green)};
+      ${visible(correct)};
+    }
 
-  ${Icon} {
-    left: 8px;
-    position: absolute;
-    /* top: 4px; */
-    font-size: 16px;
-    transition: all ease 150ms;
-  }
+    ${Icon} {
+      left: 8px;
+      position: absolute;
+      font-size: 16px;
+      transition: all ease 150ms;
+    }
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 /*
 * Types
diff --git a/src/inputs/MultipleTextField.tsx b/src/inputs/MultipleTextField.tsx
index 401809413..47f03f5ab 100644
--- a/src/inputs/MultipleTextField.tsx
+++ b/src/inputs/MultipleTextField.tsx
@@ -1,25 +1,25 @@
 import React, { Component, ReactNode } from 'react'
-import styled, { SimpleInterpolation } from 'styled-components'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import styled, { css, SimpleInterpolation } from 'styled-components'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 import { TextFieldProps, TextField } from './TextField'
 import { flexFlow, typography, FontSizes } from '@monorail/CommonStyles'
+import { CommonComponentType } from '@monorail/types'
 
 // TODO - duplicate from text field container
-const MultipleTextFieldContainer = styled<
-  { cssOverrides?: SimpleInterpolation },
-  'label'
->('label')`
-  ${flexFlow()};
+const MultipleTextFieldContainer = styled.label<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  float: none;
-  width: 100%;
-  position: relative; /* position: relative; so that the icons can be absolutely positioned. */
+    float: none;
+    width: 100%;
+    position: relative; /* position: relative; so that the icons can be absolutely positioned. */
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 // TODO - consolidate label into a common component
-export const BBTextFieldLabel = styled('p')`
+export const BBTextFieldLabel = styled.p`
   ${typography(500, FontSizes.Title5)};
   margin: 4px 0;
 `
diff --git a/src/inputs/Search.tsx b/src/inputs/Search.tsx
index 6e0a8e999..0722a3bfe 100644
--- a/src/inputs/Search.tsx
+++ b/src/inputs/Search.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent, Component, MouseEvent, RefObject } from 'react'
 import styled, { css, SimpleInterpolation } from 'styled-components'
+import { Overwrite } from 'typelevel-ts'
 
 import { Icon, IconProps } from '@monorail/icon/Icon'
 import { IconButton } from '@monorail/buttons/IconButton'
@@ -12,14 +13,7 @@ import {
   typography,
   visible,
 } from '@monorail/CommonStyles'
-
-import {
-  ButtonSize,
-  ButtonDisplay,
-  IconButtonShape,
-} from '@monorail/buttons/buttonTypes'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
-import { Overwrite } from 'typelevel-ts'
+import { ButtonSize } from '@monorail/buttons/buttonTypes'
 
 //
 // Styles
@@ -27,9 +21,9 @@ import { Overwrite } from 'typelevel-ts'
 
 const BBSearchIconPos = 3
 
-export const BBSearchContainer = styled.label<BBSearchContainerProps>`
-  ${({ darkMode }) =>
-    darkMode
+export const BBSearchContainer = styled.label<BBSearchContainerProps>(
+  ({ darkMode, cssOverrides }) => css`
+    ${darkMode
       ? css`
           background: ${colors(Colors.White, 0.2)};
           border: 1px solid ${colors(Colors.White, 0.2)};
@@ -54,30 +48,33 @@ export const BBSearchContainer = styled.label<BBSearchContainerProps>`
           }
         `};
 
-  ${flexFlow('row')};
-  border-radius: 100px;
-  box-sizing: border-box;
-  overflow: hidden; /* So the child element (BBSearchInput) doesn't cut into BBSearchContainer's border */
-  position: relative; /* position: relative; so that BBSearchIcon can be positioned absolute to this. */
-  height: 24px;
-  flex-shrink: 0;
-
-  ${({ cssOverrides }) => cssOverrides};
-`
-
-const BBSearchIcon = styled<{ darkMode?: boolean } & IconProps>(
-  ({ darkMode, ...otherProps }) => <Icon {...otherProps} />,
-)`
-  color: ${({ darkMode }) => darkMode && colors(Colors.White)};
-  left: 8px;
-  pointer-events: none;
-  position: absolute;
-  top: ${BBSearchIconPos}px;
-`
-
-export const BBSearchInput = styled.input<BBSearchInputProps>`
-  ${({ darkMode }) =>
-    darkMode
+    ${flexFlow('row')};
+    border-radius: 100px;
+    box-sizing: border-box;
+    overflow: hidden; /* So the child element (BBSearchInput) doesn't cut into BBSearchContainer's border */
+    position: relative; /* position: relative; so that BBSearchIcon can be positioned absolute to this. */
+    height: 24px;
+    flex-shrink: 0;
+
+    ${cssOverrides};
+  `,
+)
+
+const BBSearchIcon = styled(({ darkMode, ...otherProps }) => (
+  <Icon {...otherProps} />
+))<{ darkMode?: boolean } & IconProps>(
+  ({ darkMode }) => css`
+    color: ${darkMode && colors(Colors.White)};
+    left: 8px;
+    pointer-events: none;
+    position: absolute;
+    top: ${BBSearchIconPos}px;
+  `,
+)
+
+export const BBSearchInput = styled.input<BBSearchInputProps>(
+  ({ darkMode }) => css`
+    ${darkMode
       ? css`
           background: ${colors(Colors.White, 0.2)};
           border: 0;
@@ -113,22 +110,19 @@ export const BBSearchInput = styled.input<BBSearchInputProps>`
           }
         `};
 
-  ${typography(500, FontSizes.Title5)};
-  border: 0;
-  flex: 1 1 100%;
-  height: 100%;
-  outline: none;
-  padding: 0 22px 0 28px;
+    ${typography(500, FontSizes.Title5)};
+    border: 0;
+    flex: 1 1 100%;
+    height: 100%;
+    outline: none;
+    padding: 0 22px 0 28px;
 
-  border-radius: 100px;
-  box-sizing: border-box;
+    border-radius: 100px;
+    box-sizing: border-box;
 
-  ${buttonTransition};
-`
-export type BBSearchInput = StyledHtmlElement<
-  HTMLInputElement,
-  BBSearchInputProps
->
+    ${buttonTransition};
+  `,
+)
 
 //
 // Types
@@ -136,23 +130,17 @@ export type BBSearchInput = StyledHtmlElement<
 
 export type BBSearchContainerProps = {
   cssOverrides?: SimpleInterpolation
-  searchRef?: RefObject<SearchRefType>
+  searchRef?: RefObject<HTMLInputElement>
   darkMode: boolean
 }
 
 export type BBSearchInputProps = {
   darkMode: boolean
-  // onChange: (event: ChangeEvent<HTMLInputElement>) => void
   onClick?: (event: MouseEvent<HTMLInputElement>) => void
   placeholder: string
   value?: string
 }
 
-export type SearchRefType = StyledHtmlElement<
-  HTMLInputElement,
-  BBSearchInputProps
->
-
 type SearchProps = BBSearchContainerProps &
   Overwrite<
     BBSearchInputProps,
@@ -180,10 +168,15 @@ export class Search extends Component<SearchProps> {
       value,
       onClick,
       searchRef,
+      ...otherProps
     } = this.props
 
     return (
-      <BBSearchContainer cssOverrides={cssOverrides} darkMode={darkMode}>
+      <BBSearchContainer
+        cssOverrides={cssOverrides}
+        darkMode={darkMode}
+        {...otherProps}
+      >
         <BBSearchIcon icon="search_icon" darkMode={darkMode} />
 
         <BBSearchInput
diff --git a/src/inputs/Select.tsx b/src/inputs/Select.tsx
index f7b4c72ce..1b860e63e 100644
--- a/src/inputs/Select.tsx
+++ b/src/inputs/Select.tsx
@@ -2,17 +2,17 @@ import React, { SFC } from 'react'
 import styled, { css, SimpleInterpolation } from 'styled-components'
 
 import { typography, FontSizes } from '@monorail/CommonStyles'
+import { CommonComponentType } from '@monorail/types'
 
-const SelectGroupWrapper = styled<
-  { cssOverrides?: SimpleInterpolation },
-  'div'
->('div')`
-  margin: 0;
-  padding: 0;
-  border: 0;
+const SelectGroupWrapper = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    margin: 0;
+    padding: 0;
+    border: 0;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 const SelectElementWrapper = styled.div`
   background-color: white;
diff --git a/src/inputs/TextArea.tsx b/src/inputs/TextArea.tsx
index 6706ecfe0..caa14f095 100644
--- a/src/inputs/TextArea.tsx
+++ b/src/inputs/TextArea.tsx
@@ -1,5 +1,4 @@
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 import React, { ChangeEvent, Component } from 'react'
 import styled, { css, SimpleInterpolation } from 'styled-components'
 
@@ -17,65 +16,63 @@ import {
 * Styles
 */
 
-const BBTextAreaContainer = styled<TextAreaProps, 'label'>('label')`
-  ${flexFlow()};
+const BBTextAreaContainer = styled.label<TextAreaProps>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  max-width: 256px;
-  width: 100%;
-  position: relative; /* position: relative; so that the icons can be absolutely positioned. */
+    max-width: 256px;
+    width: 100%;
+    position: relative; /* position: relative; so that the icons can be absolutely positioned. */
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-const BBTextAreaLabel = styled('p')`
+const BBTextAreaLabel = styled.p`
   ${typography(500, FontSizes.Title5)};
   margin: 4px 0;
 `
 
-type BBTextAreaInput = StyledHtmlElement<
-  HTMLTextAreaElement,
-  BBTextAreaInputProps
->
-const BBTextAreaInput = styled<BBTextAreaInputProps, 'textarea'>('textarea')`
-  ${typography(400, FontSizes.Title5)};
-  ${borderRadius()};
-
-  border: 1px solid ${colors(Colors.Black, 0.12)};
-  box-sizing: border-box;
-  color: ${colors(Colors.Black89)};
-  outline: none;
-  padding: 4px 6px 4px 6px;
-  resize: none;
-  width: 100%;
-
-  ${buttonTransition};
-
-  ::placeholder {
-    color: ${colors(Colors.Black54)};
-    font-style: italic;
-  }
+const BBTextAreaInput = styled.textarea<BBTextAreaInputProps>(
+  ({ chromeless, compact }) => css`
+    ${typography(400, FontSizes.Title5)};
+    ${borderRadius()};
 
-  &:hover {
-    border: 1px solid ${colors(Colors.Black, 0.3)};
-  }
+    border: 1px solid ${colors(Colors.Black, 0.12)};
+    box-sizing: border-box;
+    color: ${colors(Colors.Black89)};
+    outline: none;
+    padding: 4px 6px 4px 6px;
+    resize: none;
+    width: 100%;
 
-  &:focus,
-  &:active {
-    border: 1px solid ${colors(Colors.BrandLightBlue)};
-  }
+    ${buttonTransition};
 
-  ${({ chromeless }) =>
-    chromeless &&
-    css`
-      border: 1px solid transparent;
-    `};
-
-  ${({ compact }) =>
-    compact &&
-    css`
-      overflow: hidden;
-    `};
-`
+    ::placeholder {
+      color: ${colors(Colors.Black54)};
+      font-style: italic;
+    }
+
+    &:hover {
+      border: 1px solid ${colors(Colors.Black, 0.3)};
+    }
+
+    &:focus,
+    &:active {
+      border: 1px solid ${colors(Colors.BrandLightBlue)};
+    }
+
+    ${chromeless &&
+      css`
+        border: 1px solid transparent;
+      `};
+
+    ${compact &&
+      css`
+        overflow: hidden;
+      `};
+  `,
+)
 
 /*
 * Types
@@ -104,7 +101,7 @@ export type TextAreaProps = BBTextAreaContainerProps & BBTextAreaInputProps & {}
 */
 
 export class TextArea extends Component<TextAreaProps> {
-  textArea = React.createRef<BBTextAreaInput>()
+  textArea = React.createRef<HTMLTextAreaElement>()
 
   setCompactHeight = () => {
     const { compact } = this.props
diff --git a/src/inputs/TextField.tsx b/src/inputs/TextField.tsx
index 27e4b8e31..38755cf01 100644
--- a/src/inputs/TextField.tsx
+++ b/src/inputs/TextField.tsx
@@ -16,18 +16,20 @@ import { Icon } from '@monorail/icon/Icon'
 * Styles
 */
 
-const BBTextFieldContainer = styled<TextFieldProps, 'label'>('label')`
-  ${flexFlow()};
+const BBTextFieldContainer = styled.label<TextFieldProps>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  float: none;
-  max-width: 256px;
-  width: 100%;
-  position: relative; /* position: relative; so that the icons can be absolutely positioned. */
+    float: none;
+    max-width: 256px;
+    width: 100%;
+    position: relative; /* position: relative; so that the icons can be absolutely positioned. */
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-export const BBTextFieldLabel = styled('p')`
+export const BBTextFieldLabel = styled.p`
   ${typography(500, FontSizes.Title5)};
   margin: 4px 0;
 `
@@ -48,76 +50,77 @@ const StyledRightIcon = styled(Icon)`
   right: 8px;
 `
 
-const BBTextFieldInput = styled<BBTextFieldInputProps, 'input'>('input')`
-  ${typography(400, FontSizes.Title5)};
-  ${borderRadius()};
+const BBTextFieldInput = styled.input<BBTextFieldInputProps>(
+  ({ chromeless, iconLeft, iconRight }) => css`
+    ${typography(400, FontSizes.Title5)};
+    ${borderRadius()};
 
-  border: ${({ chromeless }) =>
-    chromeless
+    border: ${chromeless
       ? `1px solid transparent`
       : `1px solid ${colors(Colors.Black, 0.12)}`};
-  box-sizing: border-box;
-  color: ${colors(Colors.Black89)};
-  height: 24px;
-  outline: none;
-  padding: 4px ${({ iconRight }) => (iconRight ? 30 : 6)}px 4px
-    ${({ iconLeft }) => (iconLeft ? 30 : 6)}px;
-  width: 100%;
-
-  ${buttonTransition};
-
-  &[type='number'] {
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      opacity: 1;
+    box-sizing: border-box;
+    color: ${colors(Colors.Black89)};
+    height: 24px;
+    outline: none;
+    padding: 4px ${iconRight ? 30 : 6}px 4px ${iconLeft ? 30 : 6}px;
+    width: 100%;
+
+    ${buttonTransition};
+
+    &[type='number'] {
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        opacity: 1;
+      }
     }
-  }
 
-  ::placeholder {
-    color: ${colors(Colors.Black54)};
-    font-style: italic;
-  }
+    ::placeholder {
+      color: ${colors(Colors.Black54)};
+      font-style: italic;
+    }
 
-  &:hover {
-    border-color: ${colors(Colors.Black, 0.3)};
-  }
+    &:hover {
+      border-color: ${colors(Colors.Black, 0.3)};
+    }
 
-  &:focus,
-  &:active {
-    border-color: ${colors(Colors.BrandLightBlue)};
-  }
-`
+    &:focus,
+    &:active {
+      border-color: ${colors(Colors.BrandLightBlue)};
+    }
+  `,
+)
 
 // TODO: Much duplication from TextInput
-const BBTextAreaInput = styled<BBTextFieldInputProps, 'textarea'>('textarea')`
-  ${typography(400, FontSizes.Title5)};
-  ${borderRadius()};
-
-  border: 1px solid ${colors(Colors.Black, 0.12)};
-  box-sizing: border-box;
-  color: ${colors(Colors.Black89)};
-  height: 5em;
-  outline: none;
-  padding: 4px ${({ iconRight }) => (iconRight ? 30 : 6)}px 4px
-    ${({ iconLeft }) => (iconLeft ? 30 : 6)}px;
-  width: 100%;
-
-  ${buttonTransition};
-
-  ::placeholder {
-    color: ${colors(Colors.Black54)};
-    font-style: italic;
-  }
+const BBTextAreaInput = styled.textarea<BBTextFieldInputProps>(
+  ({ iconLeft, iconRight }) => css`
+    ${typography(400, FontSizes.Title5)};
+    ${borderRadius()};
+
+    border: 1px solid ${colors(Colors.Black, 0.12)};
+    box-sizing: border-box;
+    color: ${colors(Colors.Black89)};
+    height: 5em;
+    outline: none;
+    padding: 4px ${iconRight ? 30 : 6}px 4px ${iconLeft ? 30 : 6}px;
+    width: 100%;
+
+    ${buttonTransition};
+
+    ::placeholder {
+      color: ${colors(Colors.Black54)};
+      font-style: italic;
+    }
 
-  &:hover {
-    border-color: ${colors(Colors.Black, 0.3)};
-  }
+    &:hover {
+      border-color: ${colors(Colors.Black, 0.3)};
+    }
 
-  &:focus,
-  &:active {
-    border-color: ${colors(Colors.BrandLightBlue)};
-  }
-`
+    &:focus,
+    &:active {
+      border-color: ${colors(Colors.BrandLightBlue)};
+    }
+  `,
+)
 
 /*
 * Types
@@ -141,6 +144,8 @@ type BBTextFieldInputProps = {
   readOnly?: boolean
   required?: boolean
   type?: string
+  min?: number
+  max?: number
 }
 
 export type TextFieldProps = BBTextFieldContainerProps &
@@ -165,6 +170,8 @@ export class TextField extends Component<TextFieldProps> {
       readOnly,
       required,
       type,
+      min,
+      max,
       ...otherProps
     } = this.props
 
@@ -186,6 +193,8 @@ export class TextField extends Component<TextFieldProps> {
           disabled={disabled}
           readOnly={readOnly}
           required={required}
+          min={min}
+          max={max}
           {...otherProps}
         />
       </BBTextFieldContainer>
diff --git a/src/layout/ScrollAnimation.tsx b/src/layout/ScrollAnimation.tsx
index dfeb3cc69..5a0a5fe5d 100644
--- a/src/layout/ScrollAnimation.tsx
+++ b/src/layout/ScrollAnimation.tsx
@@ -1,13 +1,9 @@
 import React, { Component, RefObject } from 'react'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
-import { PageHeaderShadowProps } from '../pageHeader/PageHeader'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 type Props = {
-  scrollContainer: RefObject<StyledHtmlElement<HTMLDivElement, {}>>
-  animatingElement: RefObject<
-    StyledHtmlElement<HTMLDivElement, PageHeaderShadowProps>
-  >
+  scrollContainer: RefObject<HTMLDivElement>
+  animatingElement: RefObject<HTMLDivElement>
   animationFunction: (
     props: { scrollAmount: number; animationTermination: number },
   ) => string
@@ -57,7 +53,7 @@ export class ScrollAnimation extends Component<Props, State> {
     }
   }
 
-  handleScroll = (event: UIEvent) => {
+  handleScroll: EventListener = event => {
     const {
       animationTermination,
       animatingElement: { current: animatingElement },
diff --git a/src/layout/SingleCollection.tsx b/src/layout/SingleCollection.tsx
index fb0aea37c..3a6520ec5 100644
--- a/src/layout/SingleCollection.tsx
+++ b/src/layout/SingleCollection.tsx
@@ -1,9 +1,7 @@
 import React, { Component, createRef, ReactNode, RefObject } from 'react'
 import styled from 'styled-components'
 import { flexFlow } from '@monorail/CommonStyles'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
 import { ScrollAnimation } from '@monorail/layout/ScrollAnimation'
-import { PageHeaderShadowRefType } from '@monorail/pageHeader/PageHeader'
 
 const SingleCollectionContainer = styled.div`
   ${flexFlow()};
@@ -12,21 +10,19 @@ const SingleCollectionContainer = styled.div`
   height: 100%;
 `
 
-export type SingleCollectionContainerRef = StyledHtmlElement<HTMLDivElement, {}>
+export type SingleCollectionHeaderProps = {
+  shadowRef: RefObject<HTMLDivElement>
+  willAnimateShadow: boolean
+}
 
 type Props = {
-  header: (
-    props: {
-      shadowRef: RefObject<PageHeaderShadowRefType>
-      willAnimateShadow: boolean
-    },
-  ) => ReactNode
+  header: (props: SingleCollectionHeaderProps) => ReactNode
   content: ReactNode
 }
 
 export class SingleCollection extends Component<Props> {
-  singleCollectionContainer = createRef<SingleCollectionContainerRef>()
-  pageHeaderShadow = createRef<PageHeaderShadowRefType>()
+  singleCollectionContainer = createRef<HTMLDivElement>()
+  pageHeaderShadow = createRef<HTMLDivElement>()
 
   render() {
     const { header, content } = this.props
diff --git a/src/layout/layout.ts b/src/layout/layout.ts
index 80485a6ce..d842bbd11 100644
--- a/src/layout/layout.ts
+++ b/src/layout/layout.ts
@@ -1,21 +1,21 @@
 import styled from 'styled-components'
-import { Colors, colors, flexFlow } from '@monorail/CommonStyles'
+import { flexFlow, gothamFontFamily } from '@monorail/CommonStyles'
 import { CommonComponentType } from '@monorail/types'
 
-export const AppBody = styled<CommonComponentType, 'div'>('div')`
-  ${flexFlow('row')};
-
-  flex: 1;
-  overflow: hidden;
-`
-
-export const AppContainer = styled<CommonComponentType, 'div'>('div')`
+export const AppContainer = styled.div<CommonComponentType>`
   ${flexFlow()};
 
   flex: 1;
   overflow: hidden;
+
+  &.event-design,
+  &.events:not(.execution),
+  &.home {
+    ${gothamFontFamily};
+  }
 `
-export const PageContent = styled<CommonComponentType, 'div'>('div')`
+
+export const PageContent = styled.div<CommonComponentType>`
   ${flexFlow()};
 
   flex: 1;
diff --git a/src/list/List.tsx b/src/list/List.tsx
index 441895228..d9011b5e6 100644
--- a/src/list/List.tsx
+++ b/src/list/List.tsx
@@ -21,7 +21,7 @@ import {
 } from '@monorail/CommonStyles'
 import { Icon, IconProps } from '@monorail/icon/Icon'
 import { CommonComponentType } from '@monorail/types'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 /*
 *
@@ -33,14 +33,16 @@ import { isNil } from '@monorail/CoreUtils/primitive-guards'
 * Styles
 */
 
-const BBListContainer = styled<BBListContainerProps, 'div'>('div')`
-  ${flexFlow()};
+const BBListContainer = styled.div<BBListContainerProps>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  overflow-y: auto;
-  padding: 8px 0;
+    overflow-y: auto;
+    padding: 8px 0;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 /*
 * Types
@@ -111,18 +113,20 @@ type ListItemProps = LinkProps &
 * Styles
 */
 
-export const ListItemText = styled<CommonComponentType, 'div'>('div')`
-  /* This is row wrap instead of column nowrap because IE11 doesn't give the item height when it is a column. */
-  ${flexFlow('row', 'wrap')};
+export const ListItemText = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    /* This is row wrap instead of column nowrap because IE11 doesn't give the item height when it is a column. */
+    ${flexFlow('row', 'wrap')};
 
-  overflow: hidden;
-  width: 100%;
+    overflow: hidden;
+    width: 100%;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-export const ListItemPrimaryText = styled<CommonComponentType, 'span'>('span')`
-  ${({ cssOverrides }) => css`
+export const ListItemPrimaryText = styled.span<CommonComponentType>(
+  ({ cssOverrides }) => css`
     ${typography(500, FontSizes.Title5, 'auto 6px')};
     ${ellipsis};
 
@@ -130,41 +134,41 @@ export const ListItemPrimaryText = styled<CommonComponentType, 'span'>('span')`
     flex: 1 1 100%;
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
-export const ListItemSecondaryText = styled<CommonComponentType, 'span'>(
-  'span',
-)`
-  ${typography(500, FontSizes.Content, 'auto 6px')};
-  ${ellipsis};
+export const ListItemSecondaryText = styled.span<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${typography(500, FontSizes.Content, 'auto 6px')};
+    ${ellipsis};
 
-  color: ${colors(Colors.Black62)};
-  flex: 1 1 100%;
+    color: ${colors(Colors.Black62)};
+    flex: 1 1 100%;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 type BBListSizeIconProps = ListSizeProps & { icon: string }
 
-export const ListItemGraphic = styled<BBListSizeIconProps & IconProps>(
-  ({ dense, ...otherProps }) => <Icon {...otherProps} />,
-)`
-  ${({ dense }) => css`
+export const ListItemGraphic = styled(({ dense, ...otherProps }) => (
+  <Icon {...otherProps} />
+))<BBListSizeIconProps & IconProps>(
+  ({ dense, cssOverrides }) => css`
     margin: auto ${dense ? 4 : 6}px;
-  `};
 
-  ${buttonTransition};
+    ${buttonTransition};
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-export const ListItem = styled<ListItemProps>(
+export const ListItem = styled(
   ({ cssOverrides, children, activeClassName, ...otherProps }) => (
     <div {...otherProps}>{children}</div>
   ),
-)`
-  ${({ as, cssOverrides, dense, disabled, onClick, size = Sizes.DP24 }) => css`
+)<ListItemProps>(
+  ({ as, cssOverrides, dense, disabled, onClick, size = Sizes.DP24 }) => css`
     ${!isNil(onClick) || !isNil(as)
       ? css`
           background: transparent;
@@ -223,8 +227,8 @@ export const ListItem = styled<ListItemProps>(
     }
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
 ListItem.defaultProps = {
   activeClassName: 'is-active',
diff --git a/src/menu/Menu.tsx b/src/menu/Menu.tsx
index 65da0e8be..d88ecef9a 100644
--- a/src/menu/Menu.tsx
+++ b/src/menu/Menu.tsx
@@ -1,6 +1,5 @@
 import React, { Component, ReactNode, createRef } from 'react'
 import styled, { css, SimpleInterpolation } from 'styled-components'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
 import { PopOverChildProps } from '@monorail/popOver/PopOver'
 import {
   BorderRadius,
@@ -15,31 +14,33 @@ import {
 } from '@monorail/CommonStyles'
 import { Overlay } from '@monorail/toggle/Overlay'
 import { fromNullable } from 'fp-ts/lib/Option'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 type MenuProps = {
   children: ReactNode
   cssOverrides?: SimpleInterpolation
   width: string
 }
-type MenuRef = StyledHtmlElement<HTMLDivElement, MenuProps>
-const CCMenu = styled<MenuProps, 'div'>('div')`
-  ${borderRadius(BorderRadius.Medium)};
-  ${flexFlow()};
-  ${getElevation(ElevationRange.Elevation6)};
 
-  background: ${colors(Colors.White)};
-  overflow: hidden;
-  position: fixed;
-  width: ${({ width }) => width};
-  min-width: ${sizes.menu.width}px;
+const CCMenu = styled.div<MenuProps>(
+  ({ width, cssOverrides }) => css`
+    ${borderRadius(BorderRadius.Medium)};
+    ${flexFlow()};
+    ${getElevation(ElevationRange.Elevation6)};
+
+    background: ${colors(Colors.White)};
+    overflow: hidden;
+    position: fixed;
+    width: ${width};
+    min-width: ${sizes.menu.width}px;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 type ModalContentProps = { cssOverrides?: SimpleInterpolation }
-const MenuContent = styled<ModalContentProps, 'div'>('div')`
-  ${({ cssOverrides }) => css`
+const MenuContent = styled.div<ModalContentProps>(
+  ({ cssOverrides }) => css`
     ${flexFlow()};
 
     height: 100%;
@@ -48,11 +49,12 @@ const MenuContent = styled<ModalContentProps, 'div'>('div')`
     width: 100%;
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
 type Props = PopOverChildProps & {
   width?: number
+  zIndex: number
 }
 
 type State = {
@@ -61,12 +63,16 @@ type State = {
 }
 
 export class Menu extends Component<Props, State> {
+  static defaultProps = {
+    zIndex: 9998,
+  }
+
   state: State = {
     menuHeight: 0,
     menuWidth: 0,
   }
 
-  menuRef = createRef<MenuRef>()
+  menuRef = createRef<HTMLDivElement>()
 
   componentDidMount() {
     this.updateMenuHeight()
@@ -99,6 +105,7 @@ export class Menu extends Component<Props, State> {
       children,
       width,
       togglePopOver,
+      zIndex,
     } = this.props
     const { menuHeight, menuWidth } = this.state
 
@@ -118,6 +125,7 @@ export class Menu extends Component<Props, State> {
         onClick={onClick}
         overlayProps={{ chromeless: true }}
         togglePopOver={togglePopOver}
+        zIndex={zIndex}
       >
         <CCMenu
           width={isNil(width) ? 'auto' : `${width}px`}
diff --git a/src/modals/FullScreenModal.tsx b/src/modals/FullScreenModal.tsx
index 00280d76b..16eb75dcd 100644
--- a/src/modals/FullScreenModal.tsx
+++ b/src/modals/FullScreenModal.tsx
@@ -4,7 +4,7 @@ import { css } from 'styled-components'
 import { PopOverChildProps } from '@monorail/popOver/PopOver'
 import { BBModalBackground, BBModalHeader } from '@monorail/modals/Modals'
 import { Overlay } from '@monorail/toggle/Overlay'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 type Props = PopOverChildProps & {
   customCloseButton?: ReactNode
diff --git a/src/modals/MediumModal.tsx b/src/modals/MediumModal.tsx
index 5a75dc3b1..af249e493 100644
--- a/src/modals/MediumModal.tsx
+++ b/src/modals/MediumModal.tsx
@@ -3,10 +3,12 @@ import React, { Component } from 'react'
 import { PopOverChildProps } from '@monorail/popOver/PopOver'
 import { BBModalBackground, BBModalHeader } from '@monorail/modals/Modals'
 import { Overlay } from '@monorail/toggle/Overlay'
+import { SimpleInterpolation } from 'styled-components'
 
 type Props = PopOverChildProps & {
   title: string
   iconLeft?: string
+  headerStyles?: SimpleInterpolation
 }
 
 export class MediumModal extends Component<Props> {
@@ -18,12 +20,18 @@ export class MediumModal extends Component<Props> {
       title,
       iconLeft,
       togglePopOver,
+      headerStyles,
     } = this.props
 
     return (
       <Overlay isOpen={isOpen} onClick={onClick} togglePopOver={togglePopOver}>
         <BBModalBackground>
-          <BBModalHeader title={title} iconLeft={iconLeft} onClose={onClick} />
+          <BBModalHeader
+            title={title}
+            iconLeft={iconLeft}
+            onClose={onClick}
+            cssOverrides={headerStyles}
+          />
           {children}
         </BBModalBackground>
       </Overlay>
diff --git a/src/modals/Modals.tsx b/src/modals/Modals.tsx
index 199ac69ef..e8d622fd1 100644
--- a/src/modals/Modals.tsx
+++ b/src/modals/Modals.tsx
@@ -42,26 +42,27 @@ export type BBModalBackgroundProps = BBModalSize & CommonComponentType
 * Component
 */
 
-export const BBModalBackground = styled<BBModalBackgroundProps, 'div'>('div')`
-  ${({ mini }) =>
-    mini &&
-    css`
-      height: ${sizes.modals.mini.height}px;
-    `};
+export const BBModalBackground = styled.div<BBModalBackgroundProps>(
+  ({ mini, cssOverrides }) => css`
+    ${mini &&
+      css`
+        height: ${sizes.modals.mini.height}px;
+      `};
 
-  ${borderRadius(BorderRadius.XLarge)};
-  ${flexFlow()};
-  ${getElevation(ElevationRange.Elevation24)};
+    ${borderRadius(BorderRadius.XLarge)};
+    ${flexFlow()};
+    ${getElevation(ElevationRange.Elevation24)};
 
-  background: ${colors(Colors.White)};
-  overflow: hidden;
-  width: ${({ mini }) => (mini ? sizes.modals.mini.width : 584)}px;
-  position: relative; /* position: relative; so that the shadow works when on the BBModalOverlay */
+    background: ${colors(Colors.White)};
+    overflow: hidden;
+    width: ${mini ? sizes.modals.mini.width : 584}px;
+    position: relative; /* position: relative; so that the shadow works when on the BBModalOverlay */
 
-  will-change: transform;
+    will-change: transform;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 /*
 *
@@ -73,47 +74,55 @@ export const BBModalBackground = styled<BBModalBackgroundProps, 'div'>('div')`
 * Styles
 */
 
-const BBModalHeaderContainer = styled<BBModalSize, 'div'>('div')`
-  ${({ mini }) => flexFlow(mini ? 'column' : 'row')};
+const BBModalHeaderContainer = styled.div<
+  BBModalSize & { cssOverrides: SimpleInterpolation }
+>(
+  ({ mini, cssOverrides }) => css`
+    ${flexFlow(mini ? 'column' : 'row')};
 
-  ${getElevation(ElevationRange.Elevation2)};
+    ${getElevation(ElevationRange.Elevation2)};
 
-  background: ${colors(Colors.BrandDarkBlue)};
-  flex-shrink: 0;
-  user-select: none;
-  z-index: 1;
+    background: ${colors(Colors.BrandDarkBlue)};
+    flex-shrink: 0;
+    user-select: none;
+    z-index: 1;
 
-  ${BBSearchContainer} {
-    ${({ mini }) =>
-      mini
+    ${BBSearchContainer} {
+      ${mini
         ? css`
             margin: 8px 16px 16px;
           `
         : css`
             margin: auto 16px auto auto;
           `};
-  }
-`
+    }
 
-const BBModalHeaderRow = styled<BBModalSize, 'div'>('div')`
-  ${flexFlow('row')};
+    ${cssOverrides};
+  `,
+)
 
-  align-items: center;
-  height: ${({ mini }) => (mini ? 48 : 56)}px;
-  padding: 0 16px;
-  width: 100%;
-`
+const BBModalHeaderRow = styled.div<BBModalSize>(
+  ({ mini }) => css`
+    ${flexFlow('row')};
 
-const BBModalHeaderTitle = styled<BBModalSize, 'h1'>('h1')`
-  ${({ mini }) =>
-    mini
+    align-items: center;
+    height: ${mini ? 48 : 56}px;
+    padding: 0 16px;
+    width: 100%;
+  `,
+)
+
+const BBModalHeaderTitle = styled.h1<BBModalSize>(
+  ({ mini }) => css`
+    ${mini
       ? typography(700, FontSizes.Title4)
       : typography(700, FontSizes.Title3)};
 
-  color: ${colors(Colors.White)};
-  white-space: nowrap;
-  margin: 0;
-`
+    color: ${colors(Colors.White)};
+    white-space: nowrap;
+    margin: 0;
+  `,
+)
 
 const baseIconStyles = css`
   color: ${colors(Colors.White)};
@@ -146,6 +155,7 @@ type BBModalHeaderProps = BBModalSize & {
   iconRight?: string
   onClose?: (event: MouseEvent) => void
   title: string
+  cssOverrides?: SimpleInterpolation
 }
 
 type DefaultCloseButtonProps = Pick<
@@ -187,8 +197,9 @@ export const BBModalHeader: StatelessComponent<BBModalHeaderProps> = ({
   mini,
   onClose,
   title,
+  cssOverrides,
 }) => (
-  <BBModalHeaderContainer mini={mini}>
+  <BBModalHeaderContainer mini={mini} cssOverrides={cssOverrides}>
     <BBModalHeaderRow mini={mini}>
       {appIcon && <StyledAppIconLeft appName={appIcon} />}
       {iconLeft && <StyledIconLeft icon={iconLeft} />}
@@ -220,7 +231,7 @@ export const BBModalHeader: StatelessComponent<BBModalHeaderProps> = ({
 * Styles
 */
 
-export const BBModalFooter = styled('div')`
+export const BBModalFooter = styled.div`
   ${flexFlow('row')};
   ${getElevation(ElevationRange.Elevation6)};
 
@@ -242,25 +253,26 @@ export const BBModalFooter = styled('div')`
 * Styles
 */
 
-const BBModalOverlayContainer = styled<BBModalOverlayProps, 'div'>('div')`
-  ${({ isOpen }) => visible(isOpen)};
-  ${({ chromeless }) =>
-    !chromeless &&
-    css`
-      background: ${colors(Colors.Black, 0.36)};
-    `};
+const BBModalOverlayContainer = styled.div<BBModalOverlayProps>(
+  ({ isOpen, chromeless, cssOverrides }) => css`
+    ${visible(isOpen)};
+    ${!chromeless &&
+      css`
+        background: ${colors(Colors.Black, 0.36)};
+      `};
 
-  bottom: 0;
-  cursor: pointer;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
 
-  transition: all ease 150ms;
+    transition: all ease 150ms;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 /*
 * Types
@@ -311,11 +323,14 @@ export const BBModalOverlay: StatelessComponent<BBModalOverlayProps> = ({
 * Styles
 */
 
-export const BBModalContainer = styled<
-  CommonComponentType & { isOpen: boolean; usesScaleAnimation: boolean },
-  'div'
->('div')`
-  ${({ isOpen, usesScaleAnimation, cssOverrides }) => css`
+export const BBModalContainer = styled.div<
+  CommonComponentType & {
+    isOpen: boolean
+    usesScaleAnimation: boolean
+    zIndex?: number
+  }
+>(
+  ({ isOpen, usesScaleAnimation, cssOverrides, zIndex }) => css`
     ${isOpen
       ? css`
           pointer-events: all;
@@ -334,7 +349,7 @@ export const BBModalContainer = styled<
     position: fixed;
     right: 0;
     top: 0;
-    z-index: 9998;
+    z-index: ${zIndex};
 
     ${!usesScaleAnimation &&
       css`
@@ -353,8 +368,8 @@ export const BBModalContainer = styled<
       `};
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
 /*
 *
@@ -366,14 +381,13 @@ export const BBModalContainer = styled<
 * Styles
 */
 
-export const BBModalContent = styled<
-  { cssOverrides?: SimpleInterpolation },
-  'div'
->('div')`
-  ${flexFlow()};
-  height: 100%;
-  max-height: 100%;
-  overflow: auto;
+export const BBModalContent = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
+    height: 100%;
+    max-height: 100%;
+    overflow: auto;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
diff --git a/src/pageHeader/PageHeader.tsx b/src/pageHeader/PageHeader.tsx
index 0325dc232..ab45b8784 100644
--- a/src/pageHeader/PageHeader.tsx
+++ b/src/pageHeader/PageHeader.tsx
@@ -19,8 +19,7 @@ import {
 import { Icon } from '@monorail/icon/Icon'
 
 import { ButtonDisplay, ButtonSize } from '@monorail/buttons/buttonTypes'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 import { Button } from '@monorail/buttons/Button'
 import { CommonComponentType } from '@monorail/types'
 import { TabBarContainer } from '@monorail/tabs/TabBar'
@@ -29,70 +28,71 @@ import { TabBarContainer } from '@monorail/tabs/TabBar'
 * Styles
 */
 
-const PageHeaderContainer = styled<PageHeaderContainerProps, 'div'>('div')`
-  ${flexFlow('column')};
+const PageHeaderContainer = styled.div<PageHeaderContainerProps>(
+  ({ flush, cssOverrides, hasAboveContent }) => css`
+    ${flexFlow('column')};
 
-  background: ${colors(Colors.White)};
-  flex-shrink: 0;
+    background: ${colors(Colors.White)};
+    flex-shrink: 0;
 
-  /* Instead of hiding overflow errors, let's see them and fix them. This was causing buttons to be hidden in error. */
-  overflow: visible;
+    /* Instead of hiding overflow errors, let's see them and fix them. This was causing buttons to be hidden in error. */
+    overflow: visible;
+
+    position: relative; /* Has this so that the shadow goes over the content below it. */
+    z-index: 1; /* Has this so that the shadow goes over the content below it. */
+
+    &::before {
+      ${flush &&
+        css`
+          border-bottom: 1px solid ${colors(Colors.Grey94)};
+        `};
+
+      background: ${colors(Colors.White)};
+      bottom: 0;
+      content: '';
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: -5;
+    }
 
-  position: relative; /* Has this so that the shadow goes over the content below it. */
-  z-index: 1; /* Has this so that the shadow goes over the content below it. */
+    ${TabBarContainer} {
+      padding: 0 24px;
 
-  &::before {
-    ${({ flush }) =>
-      flush &&
-      css`
-        border-bottom: 1px solid ${colors(Colors.Grey94)};
-      `};
+      ${!hasAboveContent &&
+        css`
+          margin-top: -8px;
+        `};
+    }
+
+    ${cssOverrides};
+  `,
+)
+
+const pageHeaderPadding = css`
+  padding: 0 32px;
+`
+
+const PageHeaderShadow = styled.div<PageHeaderShadowProps>(
+  ({ willAnimateShadow, flush }) => css`
+    ${getElevation(ElevationRange.Elevation6)};
 
     background: ${colors(Colors.White)};
-    bottom: 0;
+    bottom: 6px;
     content: '';
-    left: 0;
+    left: -2px;
     position: absolute;
-    right: 0;
+    right: -2px;
     top: 0;
-    z-index: -5;
-  }
-
-  ${TabBarContainer} {
-    padding: 0 24px;
+    z-index: -10;
 
-    ${({ hasAboveContent }) =>
-      !hasAboveContent &&
+    ${(flush || willAnimateShadow) &&
       css`
-        margin-top: -8px;
+        opacity: 0;
       `};
-  }
-
-  ${({ cssOverrides }) => cssOverrides};
-`
-
-const pageHeaderPadding = css`
-  padding: 0 32px;
-`
-
-const PageHeaderShadow = styled.div<PageHeaderShadowProps>`
-  ${getElevation(ElevationRange.Elevation6)};
-
-  background: ${colors(Colors.White)};
-  bottom: 6px;
-  content: '';
-  left: -2px;
-  position: absolute;
-  right: -2px;
-  top: 0;
-  z-index: -10;
-
-  ${({ willAnimateShadow, flush }) =>
-    (flush || willAnimateShadow) &&
-    css`
-      opacity: 0;
-    `};
-`
+  `,
+)
 
 const BreadCrumbsContainer = styled.div<BreadCrumbsContainerProps>`
   ${flexFlow('row')};
@@ -116,8 +116,8 @@ const BreadCrumb = styled.a`
   }
 `
 
-export const TitleContainer = styled.div<{ hasAboveContent: boolean }>`
-  ${({ hasAboveContent }) => css`
+export const TitleContainer = styled.div<{ hasAboveContent: boolean }>(
+  ({ hasAboveContent }) => css`
     ${flexFlow('row')};
     ${pageHeaderPadding};
 
@@ -125,10 +125,10 @@ export const TitleContainer = styled.div<{ hasAboveContent: boolean }>`
     flex-shrink: 0;
     grid-column: -1 / 1;
     height: ${hasAboveContent ? 48 : 64}px;
-  `};
-`
+  `,
+)
 
-const Title = styled('h1')`
+const Title = styled.h1`
   ${typography(700, FontSizes.Title1)};
 
   color: ${colors(Colors.BrandDarkBlue)};
@@ -141,17 +141,6 @@ const Title = styled('h1')`
 /*
 * Types
 */
-
-type PageHeaderContainerRefType = StyledHtmlElement<
-  HTMLDivElement,
-  PageHeaderContainerProps
->
-
-export type PageHeaderShadowRefType = StyledHtmlElement<
-  HTMLDivElement,
-  PageHeaderShadowProps
->
-
 export type PageHeaderShadowProps = {
   willAnimateShadow: boolean
   flush: boolean
@@ -174,7 +163,7 @@ type PageHeaderProps = CommonComponentType &
     goBack?: (event: ReactMouseEvent<Element>) => void
     title: string
     action?: ReactNode
-    shadowRef?: RefObject<PageHeaderShadowRefType>
+    shadowRef?: RefObject<HTMLDivElement>
     willAnimateShadow: boolean
     flush: boolean
   }
@@ -189,7 +178,7 @@ export class PageHeader extends Component<PageHeaderProps> {
     flush: false,
   }
 
-  pageHeaderContainerRef = createRef<PageHeaderContainerRefType>()
+  pageHeaderContainerRef = createRef<HTMLDivElement>()
 
   renderBreadCrumbs = () => {
     const { breadCrumbs } = this.props
@@ -241,6 +230,7 @@ export class PageHeader extends Component<PageHeaderProps> {
                 onClick={goBack}
                 cssOverrides={css`
                   margin-left: -4px;
+                  margin-right: 8px;
                 `}
               >
                 <Icon icon="circle_arrow_left" />
diff --git a/src/portal/Portal.tsx b/src/portal/Portal.tsx
index 9d19bdbe9..fafdc1def 100644
--- a/src/portal/Portal.tsx
+++ b/src/portal/Portal.tsx
@@ -1,6 +1,6 @@
 import { Component } from 'react'
 import ReactDOM from 'react-dom'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 /**
  * Creates a modal-root at body level if it doesn't exist already
diff --git a/src/CoreUtils/SerializableMap.ts b/src/sharedHelpers/SerializableMap.ts
similarity index 88%
rename from src/CoreUtils/SerializableMap.ts
rename to src/sharedHelpers/SerializableMap.ts
index 5cc4d468a..c53ef464f 100644
--- a/src/CoreUtils/SerializableMap.ts
+++ b/src/sharedHelpers/SerializableMap.ts
@@ -2,12 +2,14 @@ import { array } from 'fp-ts/lib/Array'
 import { Option, fromNullable, none } from 'fp-ts/lib/Option'
 import { fromFoldable } from 'fp-ts/lib/Record'
 
+// TODO: Rewrite Wizard code that uses this and then delete this
+
 /**
  * A subtype of an ES6 Map which is serializable (for viewing in Redux state)
  */
 export class SerializableMap<K extends string, V> extends Map<K, V> {
-  constructor(pair: ReadonlyArray<[K, V]>) {
-    super(pair)
+  constructor(pairs: ReadonlyArray<[K, V]>) {
+    super(pairs)
     this.lookup = this.lookup.bind(this)
     this.toJSON = this.toJSON.bind(this)
     this.toRecord = this.toRecord.bind(this)
diff --git a/src/sharedHelpers/__tests__/apiActions.jest.ts b/src/sharedHelpers/__tests__/apiActions.jest.ts
new file mode 100644
index 000000000..ef6612731
--- /dev/null
+++ b/src/sharedHelpers/__tests__/apiActions.jest.ts
@@ -0,0 +1,75 @@
+import {
+  coerceApiActionTypeToString,
+  mkApiActionTypes,
+  mkApiAction,
+} from '../apiActions'
+
+describe('coerceApiActionTypeToString', () => {
+  it('should not change the runtime value', () => {
+    const type = mkApiActionTypes('GET_USERS').types.success
+    const actual = coerceApiActionTypeToString(type)
+    const expected = 'GET_USERS_SUCCESS'
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('mkApiActionTypes', () => {
+  const { guards, prisms, types } = mkApiActionTypes('GET_USERS')
+  describe('types', () => {
+    it('should contain the correct types', () => {
+      expect(types.optimistic).toBe('GET_USERS_OPTIMISTIC')
+      expect(types.request).toBe('GET_USERS_REQUEST')
+      expect(types.success).toBe('GET_USERS_SUCCESS')
+      expect(types.failure).toBe('GET_USERS_FAILURE')
+    })
+  })
+  describe('guards', () => {
+    it('should guard types correctly', () => {
+      expect(guards.isOptimistic(types.optimistic)).toBe(true)
+      expect(guards.isRequest(types.request)).toBe(true)
+      expect(guards.isSuccess(types.success)).toBe(true)
+      expect(guards.isFailure(types.failure)).toBe(true)
+      expect(guards.isOptimistic(types.failure)).toBe(false)
+      expect(guards.isRequest(types.failure)).toBe(false)
+      expect(guards.isSuccess(types.failure)).toBe(false)
+      expect(guards.isFailure(types.success)).toBe(false)
+    })
+  })
+  describe('types', () => {
+    it('should contain prisms that function correctly', () => {
+      expect(prisms.optimistic.getOption('GET_USERS_OPTIMISTIC').isSome()).toBe(
+        true,
+      )
+      expect(prisms.request.getOption('GET_USERS_REQUEST').isSome()).toBe(true)
+      expect(prisms.success.getOption('GET_USERS_SUCCESS').isSome()).toBe(true)
+      expect(prisms.failure.getOption('GET_USERS_FAILURE').isSome()).toBe(true)
+      expect(prisms.optimistic.getOption('invalid').isSome()).toBe(false)
+      expect(prisms.request.getOption('invalid').isSome()).toBe(false)
+      expect(prisms.success.getOption('invalid').isSome()).toBe(false)
+      expect(prisms.failure.getOption('invalid').isSome()).toBe(false)
+    })
+  })
+})
+
+describe('mkApiAction', () => {
+  const { types } = mkApiActionTypes('GET_USERS')
+  it('should properly construct API actions', () => {
+    const successAction = mkApiAction(types.success)
+    expect(successAction.type).toBe('GET_USERS_SUCCESS')
+    // tslint:disable-next-line no-any
+    expect((successAction as any).payload).toBe(undefined)
+    // tslint:disable-next-line no-any
+    expect((successAction as any).meta).toBe(undefined)
+
+    const failureAction = mkApiAction(types.failure, 0)
+    expect(failureAction.type).toBe('GET_USERS_FAILURE')
+    expect(failureAction.payload).toBe(0)
+    // tslint:disable-next-line no-any
+    expect((failureAction as any).meta).toBe(undefined)
+
+    const requestAction = mkApiAction(types.request, 0, 'info')
+    expect(requestAction.type).toBe('GET_USERS_REQUEST')
+    expect(requestAction.payload).toBe(0)
+    expect(requestAction.meta).toBe('info')
+  })
+})
diff --git a/src/CoreUtils/__tests__/json-encoders-decoders.jest.ts b/src/sharedHelpers/__tests__/jsonEncodersDecoders.jest.ts
similarity index 92%
rename from src/CoreUtils/__tests__/json-encoders-decoders.jest.ts
rename to src/sharedHelpers/__tests__/jsonEncodersDecoders.jest.ts
index 7886be92a..0c9dc8f7d 100644
--- a/src/CoreUtils/__tests__/json-encoders-decoders.jest.ts
+++ b/src/sharedHelpers/__tests__/jsonEncodersDecoders.jest.ts
@@ -1,7 +1,7 @@
 import * as t from 'io-ts'
 import { Either, right } from 'fp-ts/lib/Either'
 import { Option, some, none } from 'fp-ts/lib/Option'
-import { createOptionFromJSON } from '@monorail/CoreUtils/json-encoders-decoders'
+import { createOptionFromJSON } from '@monorail/sharedHelpers/jsonEncodersDecoders'
 
 type RoundTripTest<A> = {
   result: Either<t.Errors, Option<A>>
diff --git a/src/sharedHelpers/__tests__/newtypes.jest.ts b/src/sharedHelpers/__tests__/newtypes.jest.ts
new file mode 100644
index 000000000..475d57533
--- /dev/null
+++ b/src/sharedHelpers/__tests__/newtypes.jest.ts
@@ -0,0 +1,18 @@
+import { prismNaN } from '../newtypes'
+
+describe('prismNaN', () => {
+  describe('getOption', () => {
+    it('should return a none if given a non-NaN value', () => {
+      const actual = prismNaN.getOption(3).isNone()
+      const expected = true
+      expect(actual).toEqual(expected)
+    })
+
+    it('should return a some if given a NaN value', () => {
+      const oops = (undefined as unknown) as number
+      const actual = prismNaN.getOption(3 / oops).isSome()
+      const expected = true
+      expect(actual).toEqual(expected)
+    })
+  })
+})
diff --git a/src/sharedHelpers/__tests__/optics.jest.ts b/src/sharedHelpers/__tests__/optics.jest.ts
new file mode 100644
index 000000000..72c390479
--- /dev/null
+++ b/src/sharedHelpers/__tests__/optics.jest.ts
@@ -0,0 +1,97 @@
+import { Lens } from 'monocle-ts'
+import {
+  lensesFromRecord,
+  mkRecordKeyOptional,
+  mkArrayIndexOptional,
+  oLens,
+} from '../optics'
+
+interface TestAddress {
+  street: string
+  city: string
+  postalCode: number
+}
+
+interface TestInterface {
+  firstName: string
+  lastName: string
+  age: number
+  address: TestAddress
+}
+
+const testInterface: TestInterface = {
+  firstName: 'John',
+  lastName: 'Smith',
+  age: 33,
+  address: {
+    street: '123 Lensy ST',
+    city: 'Opticland',
+    postalCode: 12345,
+  },
+}
+
+const testRecord: Record<string, number> = {
+  '81d9e19a-b936-4715-86c9-43266d0fc2b6': 0,
+  'a67d7ccb-1a5f-4a8b-9d8e-324e98ec853b': 1,
+  '43be4d69-4169-4f30-a6c2-8dd497a0472a': 2,
+}
+
+const testArray: Array<string> = ['a', 'b', 'c', 'd']
+
+describe('lensesFromRecord', () => {
+  it('should create a record containing lenses for all top level keys', () => {
+    const lenses = lensesFromRecord(testInterface)
+    const mkLens = Lens.fromProp<TestInterface>()
+    const expected = {
+      firstName: mkLens('firstName'),
+      lastName: mkLens('lastName'),
+      age: mkLens('age'),
+      address: mkLens('address'),
+    }
+    expect(JSON.stringify(lenses)).toEqual(JSON.stringify(expected))
+
+    expect(lenses.address.get(testInterface)).toEqual({
+      street: '123 Lensy ST',
+      city: 'Opticland',
+      postalCode: 12345,
+    })
+
+    expect(lenses.age.get(testInterface)).toBe(33)
+
+    expect(lenses.firstName.set('Johnathan')(testInterface).firstName).toBe(
+      'Johnathan',
+    )
+  })
+})
+
+describe('mkRecordKeyOptional', () => {
+  it('should create a properly functioning Optional for a given key', () => {
+    const testStr: string = '43be4d69-4169-4f30-a6c2-8dd497a0472a'
+    const testOptional = mkRecordKeyOptional<typeof testRecord, string>(testStr)
+    const opt = testOptional.getOption(testRecord)
+    const actual = opt.isSome() && opt.value === 2
+    const expected = true
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('mkArrayIndexOptional', () => {
+  it('should create a properly functioning Optional for a given key', () => {
+    const testOptional = mkArrayIndexOptional(2)
+    const opt = testOptional.getOption(testArray)
+    const actual = opt.isSome() && opt.value === 'c'
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('oLens', () => {
+  it('should compose two lenses together', () => {
+    const testToAddressLens = Lens.fromProp<TestInterface>()('address')
+    const addressToStreetLens = Lens.fromProp<TestAddress>()('street')
+    const testToStreetLens = oLens(testToAddressLens, addressToStreetLens)
+    const actual = testToStreetLens.get(testInterface)
+    const expected = '123 Lensy ST'
+    expect(actual).toBe(expected)
+  })
+})
diff --git a/src/sharedHelpers/__tests__/shallowEqual.jest.ts b/src/sharedHelpers/__tests__/shallowEqual.jest.ts
new file mode 100644
index 000000000..87ff7826d
--- /dev/null
+++ b/src/sharedHelpers/__tests__/shallowEqual.jest.ts
@@ -0,0 +1,19 @@
+import { shallowEqual } from '../shallowEqual'
+
+describe('shallowEqual', () => {
+  it('should return false for objects that are not shallowly equal', () => {
+    const a = { test: 99, tag: 'testing', nested: { a: 0, b: 1 } }
+    const b = { test: 99, tag: 'testing', nested: { b: 1 } }
+    const actual = shallowEqual(a, b)
+    const expected = false
+    expect(actual).toBe(expected)
+  })
+
+  it('should return true for objects that are shallowly equal', () => {
+    const a = { test: 99, tag: 'testing', nested: 3 }
+    const b = { test: 99, tag: 'testing', nested: 3 }
+    const actual = shallowEqual(a, b)
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+})
diff --git a/src/sharedHelpers/__tests__/strings.jest.ts b/src/sharedHelpers/__tests__/strings.jest.ts
new file mode 100644
index 000000000..efe191ead
--- /dev/null
+++ b/src/sharedHelpers/__tests__/strings.jest.ts
@@ -0,0 +1,115 @@
+import {
+  split,
+  replace,
+  splitName,
+  findIndex,
+  toLower,
+  trim,
+  join,
+} from '../strings'
+
+describe('split', () => {
+  it('split strings by a character separator', () => {
+    const actual = split(/,/g)('t,e,s,t')
+    const expected = ['t', 'e', 's', 't']
+    expect(actual).toEqual(expected)
+  })
+
+  it('split strings by a substring', () => {
+    const actual = split(/_,_/g)('t_,_e_,_s_,_t')
+    const expected = ['t', 'e', 's', 't']
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('replace', () => {
+  it('should replace a character', () => {
+    const actual = replace(/,/g, '_')('t,e,s,t')
+    const expected = 't_e_s_t'
+    expect(actual).toBe(expected)
+  })
+
+  it('should replace a subtring', () => {
+    const actual = replace(/_,_/g, '_')('t_,_e_,_s_,_t')
+    const expected = 't_e_s_t'
+    expect(actual).toBe(expected)
+  })
+
+  it('should omit a character when passed an empty string', () => {
+    const actual = replace(/,/g, '')('t,e,s,t')
+    const expected = 'test'
+    expect(actual).toBe(expected)
+  })
+
+  it('should omit a substring when passed an empty string', () => {
+    const actual = replace(/_,_/g, '')('t_,_e_,_s_,_t')
+    const expected = 'test'
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('splitName', () => {
+  it('split a name into a first & last key-val pairs', () => {
+    const actual = splitName('John Smith')
+    const expected = { first: 'John', last: 'Smith' }
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('findIndex', () => {
+  it('should return a none if a substring is not in a string', () => {
+    const actual = findIndex('x')('John Smith').isNone()
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return a none if a substring is not in a string', () => {
+    const actual = findIndex('xxx')('John Smith').isNone()
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return a some of an index if a char is in a string', () => {
+    const opt = findIndex('h')('John Smith')
+    const actual = opt.isSome() && opt.value === 2
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return a some of an index if a substring is in a string', () => {
+    const opt = findIndex('ohn')('John Smith')
+    const actual = opt.isSome() && opt.value === 1
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('toLower', () => {
+  it('should lowercase a string', () => {
+    const actual = toLower('John Smith')
+    const expected = 'john smith'
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('trim', () => {
+  it('should remove whitespace from around a string', () => {
+    const actual = trim('  John Smith    ')
+    const expected = 'John Smith'
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('join', () => {
+  it('should join strings with no separator when passed empty string', () => {
+    const actual = join('', ['t', 'e', 's', 't'])
+    const expected = 'test'
+    expect(actual).toBe(expected)
+  })
+
+  it('should join strings via a separator', () => {
+    const actual = join(',', ['t', 'e', 's', 't'])
+    const expected = 't,e,s,t'
+    expect(actual).toBe(expected)
+  })
+})
diff --git a/src/sharedHelpers/__tests__/taggedUnions.ts b/src/sharedHelpers/__tests__/taggedUnions.ts
new file mode 100644
index 000000000..5de341345
--- /dev/null
+++ b/src/sharedHelpers/__tests__/taggedUnions.ts
@@ -0,0 +1,139 @@
+import {
+  __,
+  mkTaggedUnion,
+  mkTaggedUnionCustom,
+  mkActionsUnion,
+} from '../taggedUnions'
+
+type TestUnionTag<A> = { tag: 'Just'; value: A } | { tag: 'Nothing' }
+type TestUnionType<A> = { type: 'Yup'; value: A } | { type: 'Nope' }
+type TestUnionKind<A> = { kind: 'Yeah'; value: A } | { kind: 'Nah' }
+
+describe('mkTaggedUnion', () => {
+  const union = mkTaggedUnion<TestUnionTag<number>>()({
+    Just: __,
+    Nothing: __,
+  })
+  describe('constructors', () => {
+    it('should properly construct (Just)', () => {
+      const actual = union.Just({ value: 0 })
+      const expected = { tag: 'Just', value: 0 }
+      expect(actual).toEqual(expected)
+    })
+
+    it('should properly construct (Nothing)', () => {
+      const actual = union.Nothing()
+      const expected = { tag: 'Nothing' }
+      expect(actual).toEqual(expected)
+    })
+  })
+  describe('fold', () => {
+    const f = union.fold({
+      Just: x => x.value + 1,
+      Nothing: () => 0,
+    })
+    it('should properly fold the union, covering all cases (Just)', () => {
+      const actual = f(union.Just({ value: 3 }))
+      const expected = 4
+      expect(actual).toEqual(expected)
+    })
+    it('should properly fold the union, covering all cases (Nothing)', () => {
+      const actual = f(union.Nothing())
+      const expected = 0
+      expect(actual).toEqual(expected)
+    })
+  })
+  describe('tags', () => {
+    it('should return an array containing the data constructor tags', () => {
+      const actual = union.tags
+      const expected = ['Just', 'Nothing']
+      expect(actual).toEqual(expected)
+    })
+  })
+})
+
+describe('mkActionsUnion', () => {
+  const union = mkActionsUnion<TestUnionType<number>>()({
+    Yup: __,
+    Nope: __,
+  })
+  describe('constructors', () => {
+    it('should properly construct (Yup)', () => {
+      const actual = union.Yup({ value: 0 })
+      const expected = { type: 'Yup', value: 0 }
+      expect(actual).toEqual(expected)
+    })
+
+    it('should properly construct (Nope)', () => {
+      const actual = union.Nope()
+      const expected = { type: 'Nope' }
+      expect(actual).toEqual(expected)
+    })
+  })
+  describe('fold', () => {
+    const f = union.fold({
+      Yup: x => x.value + 2,
+      Nope: () => 1,
+    })
+    it('should properly fold the union, covering all cases (Yup)', () => {
+      const actual = f(union.Yup({ value: 4 }))
+      const expected = 7
+      expect(actual).toEqual(expected)
+    })
+    it('should properly fold the union, covering all cases (Nope)', () => {
+      const actual = f(union.Nope())
+      const expected = 1
+      expect(actual).toEqual(expected)
+    })
+  })
+  describe('tags', () => {
+    it('should return an array containing the data constructor tags', () => {
+      const actual = union.tags
+      const expected = ['Yup', 'Nope']
+      expect(actual).toEqual(expected)
+    })
+  })
+})
+
+describe('mkTaggedUnionCustom', () => {
+  const union = mkTaggedUnionCustom<TestUnionKind<number>>()('kind', {
+    Yeah: __,
+    Nah: __,
+  })
+  describe('constructors', () => {
+    it('should properly construct (Yeah)', () => {
+      const actual = union.Yeah({ value: 0 })
+      const expected = { type: 'Yeah', value: 0 }
+      expect(actual).toEqual(expected)
+    })
+
+    it('should properly construct (Nah)', () => {
+      const actual = union.Nah()
+      const expected = { type: 'Nah' }
+      expect(actual).toEqual(expected)
+    })
+  })
+  describe('fold', () => {
+    const f = union.fold({
+      Yeah: x => x.value + 3,
+      Nah: () => 2,
+    })
+    it('should properly fold the union, covering all cases (Yup)', () => {
+      const actual = f(union.Yeah({ value: 5 }))
+      const expected = 8
+      expect(actual).toEqual(expected)
+    })
+    it('should properly fold the union, covering all cases (Nah)', () => {
+      const actual = f(union.Nah())
+      const expected = 2
+      expect(actual).toEqual(expected)
+    })
+  })
+  describe('tags', () => {
+    it('should return an array containing the data constructor tags', () => {
+      const actual = union.tags
+      const expected = ['Yup', 'Nah']
+      expect(actual).toEqual(expected)
+    })
+  })
+})
diff --git a/src/sharedHelpers/__tests__/typeGuards.jest.ts b/src/sharedHelpers/__tests__/typeGuards.jest.ts
new file mode 100644
index 000000000..d5baf8c8e
--- /dev/null
+++ b/src/sharedHelpers/__tests__/typeGuards.jest.ts
@@ -0,0 +1,42 @@
+import { NaN } from '../newtypes'
+import { isFalsy } from '../typeGuards'
+
+describe('isFalsy', () => {
+  it('should return false when given a truthy value', () => {
+    const actual = isFalsy(1)
+    const expected = false
+    expect(actual).toBe(expected)
+  })
+
+  it('should return true when given false', () => {
+    const actual = isFalsy(false)
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return true when given an empty string', () => {
+    const actual = isFalsy('')
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return true when given NaN', () => {
+    const invalidNum: number = (undefined as unknown) as number
+    const _NaN: NaN = ((3 / invalidNum) as unknown) as NaN
+    const actual = isFalsy(_NaN)
+    const expected = true
+    expect(actual).toEqual(expected)
+  })
+
+  it('should return true when given null', () => {
+    const actual = isFalsy(null)
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return true when given undefined', () => {
+    const actual = isFalsy(undefined)
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+})
diff --git a/src/CoreUtils/api-actions.ts b/src/sharedHelpers/apiActions.ts
similarity index 68%
rename from src/CoreUtils/api-actions.ts
rename to src/sharedHelpers/apiActions.ts
index 6fcc37b8c..94e58fcad 100644
--- a/src/CoreUtils/api-actions.ts
+++ b/src/sharedHelpers/apiActions.ts
@@ -1,8 +1,9 @@
 import { Predicate } from 'fp-ts/lib/function'
 import { Prism } from 'monocle-ts'
 import { Newtype, iso, prism, unsafeCoerce } from 'newtype-ts'
+import { isUndefined } from './typeGuards'
 
-interface Optimistic<A extends string>
+export interface Optimistic<A extends string>
   extends Newtype<
       {
         readonly Optimistic: unique symbol
@@ -11,7 +12,7 @@ interface Optimistic<A extends string>
       string
     > {}
 
-interface Request<A extends string>
+export interface Request<A extends string>
   extends Newtype<
       {
         readonly Request: unique symbol
@@ -20,7 +21,7 @@ interface Request<A extends string>
       string
     > {}
 
-interface Failure<A extends string>
+export interface Failure<A extends string>
   extends Newtype<
       {
         readonly Failure: unique symbol
@@ -29,7 +30,7 @@ interface Failure<A extends string>
       string
     > {}
 
-interface Success<A extends string>
+export interface Success<A extends string>
   extends Newtype<
       {
         readonly Success: unique symbol
@@ -38,7 +39,7 @@ interface Success<A extends string>
       string
     > {}
 
-type ApiActionType<A extends string> =
+export type ApiActionType<A extends string> =
   | Optimistic<A>
   | Request<A>
   | Failure<A>
@@ -46,11 +47,11 @@ type ApiActionType<A extends string> =
 
 // this is safe, because we know ApiActionType is a union of newtypes,
 // and we know each of those newtypes is actually a string at runtime
-const coerceApiActionTypeToString = <A extends string>(
+export const coerceApiActionTypeToString = <A extends string>(
   x: ApiActionType<A>,
 ): string => unsafeCoerce<ApiActionType<A>, string>(x)
 
-type ApiActionTypes<A extends string> = {
+export type ApiActionTypes<A extends string> = {
   types: {
     optimistic: Optimistic<A>
     request: Request<A>
@@ -71,7 +72,7 @@ type ApiActionTypes<A extends string> = {
   }
 }
 
-const mkApiActionTypes = <A extends string>(
+export const mkApiActionTypes = <A extends string>(
   pathPrefix: A,
 ): ApiActionTypes<A> => {
   const isoOptimistic = iso<Optimistic<A>>()
@@ -82,13 +83,13 @@ const mkApiActionTypes = <A extends string>(
   const pathOptimistic = `${pathPrefix}_OPTIMISTIC`
   const optimistic = isoOptimistic.wrap(pathOptimistic)
 
-  const pathRequest = `${pathPrefix}/_REQUEST`
+  const pathRequest = `${pathPrefix}_REQUEST`
   const request = isoRequest.wrap(pathRequest)
 
-  const pathFailure = `${pathPrefix}/_FAILURE`
+  const pathFailure = `${pathPrefix}_FAILURE`
   const failure = isoFailure.wrap(pathFailure)
 
-  const pathSuccess = `${pathPrefix}/_SUCCESS`
+  const pathSuccess = `${pathPrefix}_SUCCESS`
   const success = isoSuccess.wrap(pathSuccess)
 
   const isOptimistic = (x: ApiActionType<A>): x is Optimistic<A> =>
@@ -135,15 +136,13 @@ const mkApiActionTypes = <A extends string>(
   }
 }
 
-type GeneratedApiAction<Type, Payload, Meta> = Payload extends undefined
+export type GeneratedApiAction<Type, Payload, Meta> = Payload extends undefined
   ? (Meta extends undefined ? { type: Type } : { type: Type; meta: Meta })
   : (Meta extends undefined
       ? { type: Type; payload: Payload }
       : { type: Type; payload: Payload; meta: Meta })
 
-const isUndefined = (x: unknown): x is undefined => x === undefined
-
-const mkApiAction = <
+export const mkApiAction = <
   A extends string,
   Type extends ApiActionType<A>,
   Payload = undefined,
@@ -160,33 +159,3 @@ const mkApiAction = <
     : isUndefined(meta)
       ? { type, payload }
       : { type, payload, meta }) as GeneratedApiAction<Type, Payload, Meta>
-
-const test = mkApiActionTypes('a/path/in/my/app/SOME_API_ACTION')
-
-// => { type: Failure<"a/path/in/my/app/SOME_API_ACTION">; payload: Error; meta: string }
-const testActionA = mkApiAction(
-  test.types.failure,
-  new Error('Oops!'),
-  Date.now().toLocaleString(),
-)
-
-// => true
-const testGuardA = test.guards.isFailure(testActionA.type)
-
-// type error -- the arg given to isFailure is a string, but it needs to be an
-// ApiActionType<"a/path/in/my/app/SOME_API_ACTION">
-// const testGuardB = test.guards.isFailure('a/path/in/my/app/SOME_API_ACTION_FAILURE')
-
-// => { type: Request<"a/path/in/my/app/SOME_API_ACTION"> }
-const testActionB = mkApiAction(test.types.request)
-
-// => { type: Optimistic<"a/path/in/my/app/SOME_API_ACTION">; payload: { data: string } }
-const testActionC = mkApiAction(test.types.success, {
-  data: 'Some received data',
-})
-
-// => Option<Request<"a/path/in/my/app/SOME_API_ACTION">>
-// (it's a Some<Request<"a/path/in/my/app/SOME_API_ACTION">> in this case)
-const requestOption = test.prisms.request.getOption(
-  'a/path/in/my/app/SOME_API_ACTION_REQUEST',
-)
diff --git a/src/sharedHelpers/fp-ts-ext/Apply.ts b/src/sharedHelpers/fp-ts-ext/Apply.ts
new file mode 100644
index 000000000..68f21c69d
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/Apply.ts
@@ -0,0 +1,45 @@
+import { sequenceS, sequenceT } from 'fp-ts/lib/Apply'
+import { either } from 'fp-ts/lib/Either'
+import { option } from 'fp-ts/lib/Option'
+import { task } from 'fp-ts/lib/Task'
+import { taskEither } from 'fp-ts/lib/TaskEither'
+
+/**
+ * sequence utility for a tuple containing Options of mixed value types
+ */
+export const sequenceOptionsTuple = sequenceT(option)
+
+/**
+ * sequence utility for a tuple containing Eithers of mixed value types
+ */
+export const sequenceEithersTuple = sequenceT(either)
+
+/**
+ * sequence utility for a tuple containing Tasks of mixed value types
+ */
+export const sequenceTasksTuple = sequenceT(task)
+
+/**
+ * sequence utility for a tuple containing TaskEithers of mixed value types
+ */
+export const sequenceTaskEithersTuple = sequenceT(taskEither)
+
+/**
+ * sequence utility for structs (interfaces/objects) containing Options of mixed value types
+ */
+export const sequenceOptionsStruct = sequenceS(option)
+
+/**
+ * sequence utility for structs (interfaces/objects) containing Eithers of mixed value types
+ */
+export const sequenceEithersStruct = sequenceS(either)
+
+/**
+ * sequence utility for structs (interfaces/objects) containing Tasks of mixed value types
+ */
+export const sequenceTasksStruct = sequenceS(task)
+
+/**
+ * sequence utility for structs (interfaces/objects) containing TaskEithers of mixed value types
+ */
+export const sequenceTaskEithersStruct = sequenceS(taskEither)
diff --git a/src/CoreUtils/Array.ts b/src/sharedHelpers/fp-ts-ext/Array.ts
similarity index 92%
rename from src/CoreUtils/Array.ts
rename to src/sharedHelpers/fp-ts-ext/Array.ts
index 7b9ee3de9..965f2a6f0 100644
--- a/src/CoreUtils/Array.ts
+++ b/src/sharedHelpers/fp-ts-ext/Array.ts
@@ -1,5 +1,5 @@
 import { liftA2 } from 'fp-ts/lib/Apply'
-import { array, init, last, member, snoc, sort, uniq } from 'fp-ts/lib/Array'
+import { array, init, last, elem, snoc, sort } from 'fp-ts/lib/Array'
 import { flatten } from 'fp-ts/lib/Chain'
 import { Either, either, isRight } from 'fp-ts/lib/Either'
 import { Predicate, constFalse, constTrue, tuple } from 'fp-ts/lib/function'
@@ -10,8 +10,7 @@ import { task } from 'fp-ts/lib/Task'
 import { taskEither } from 'fp-ts/lib/TaskEither'
 
 import { runIO } from './IO'
-import { ordNumeric } from './Number'
-import { ordAlpha } from './String'
+import { ordAlpha, ordNumeric } from './Ord'
 import { getOrElse, fold } from './Option'
 
 /**
@@ -50,17 +49,7 @@ export const runIOs = <A>(xs: Array<IO<A>>) => forEach(xs, runIO)
  * Tests whether or not something is a member of an array via strict equality
  */
 export const contains = <A>(x: A) => (xs: A[]): boolean =>
-  member<A>(setoidStrict)(xs, x)
-
-/**
- * Combines two lists into a set (i.e. no duplicates)
- * composed of the elements of each list. Uses strict equality for comparisons
- *
- * NOTE: You should probably convert to a Set and use `union` from the
- * 'fp-ts/lib/Set' module instead
- */
-export const union = <A>(xs: A[], ys: A[]): A[] =>
-  uniq<A>(setoidStrict)(array.alt(xs, ys))
+  elem<A>(setoidStrict)(x, xs)
 
 /**
  * Gets the length of an ArrayLike or string
diff --git a/src/CoreUtils/Either.ts b/src/sharedHelpers/fp-ts-ext/Either.ts
similarity index 64%
rename from src/CoreUtils/Either.ts
rename to src/sharedHelpers/fp-ts-ext/Either.ts
index de39ec5a3..a9b55acf8 100644
--- a/src/CoreUtils/Either.ts
+++ b/src/sharedHelpers/fp-ts-ext/Either.ts
@@ -5,6 +5,6 @@ import { Either } from 'fp-ts/lib/Either'
  */
 export const fold = <B, L, A>(
   x: Either<L, A>,
-  whenLeft: (l: L) => B,
-  whenRight: (a: A) => B,
-) => x.fold(whenLeft, whenRight)
+  onLeft: (l: L) => B,
+  onRight: (a: A) => B,
+) => x.fold(onLeft, onRight)
diff --git a/src/CoreUtils/IO.ts b/src/sharedHelpers/fp-ts-ext/IO.ts
similarity index 78%
rename from src/CoreUtils/IO.ts
rename to src/sharedHelpers/fp-ts-ext/IO.ts
index b4146999f..3751988b6 100644
--- a/src/CoreUtils/IO.ts
+++ b/src/sharedHelpers/fp-ts-ext/IO.ts
@@ -1,6 +1,6 @@
 import { Lazy } from 'fp-ts/lib/function'
 import { IO } from 'fp-ts/lib/IO'
-import { constVoid } from './general'
+import { constVoid } from './function'
 
 /**
  * Run IO
@@ -16,7 +16,7 @@ export const constRunIO = <A>(x: IO<A>): Lazy<A> => x.run
  * IO constructor function
  *
  */
-export const mkIO = <A>(f: Lazy<A>): IO<A> => new IO(f)
+export const newIO = <A>(f: Lazy<A>): IO<A> => new IO(f)
 
 /**
  * noOp IO function
diff --git a/src/CoreUtils/Option.ts b/src/sharedHelpers/fp-ts-ext/Option.ts
similarity index 79%
rename from src/CoreUtils/Option.ts
rename to src/sharedHelpers/fp-ts-ext/Option.ts
index ce69b2652..b60a6a4bf 100644
--- a/src/CoreUtils/Option.ts
+++ b/src/sharedHelpers/fp-ts-ext/Option.ts
@@ -1,25 +1,26 @@
 import { toArray } from 'fp-ts/lib/Foldable2v'
 import { constTrue } from 'fp-ts/lib/function'
 import { Option, option, none, some } from 'fp-ts/lib/Option'
-import { Prism } from 'monocle-ts'
 import { ReactNode } from 'react'
 
-import { isNil } from './primitive-guards'
-import { isFalsy } from './general'
+import { isFalsy, isNil } from '../typeGuards'
 
 /**
  * type guard for Option
  */
 // tslint:disable-next-line:no-any
 export const isOption = <A>(x: any): x is Option<A> =>
-  !isNil(x) && !isNil(x.isSome) && !isNil(x.isNone)
+  !isNil(x) &&
+  !isNil(x.isSome) &&
+  !isNil(x.isNone) &&
+  ((!isNil(x._tag) && x._tag === 'Some') || x._tag === 'None')
 
 /**
  * Standalone version of fp-ts' `fold` for Options. Like `getOrElse`,
  * but with a mapping transformation for the value in a `Some`
  */
-export const fold = <A, B>(a: Option<A>, b: B, whenSome: (a: A) => B): B =>
-  a.fold(b, whenSome)
+export const fold = <A, B>(a: Option<A>, onNone: B, onSome: (a: A) => B): B =>
+  a.fold(onNone, onSome)
 
 /**
  * A specialized (partially applied with a null default) version of Option's
@@ -42,8 +43,8 @@ export const getOrElse = <A>(a: A) => (b: Option<A>): A => b.getOrElse(a)
  * Partially applied version of `getOrElse` providing an empty array
  * as the default argument
  */
-export const getOrEmptyArray = <A extends []>(opt: Option<A>) =>
-  getOrElse([] as A)(opt)
+export const getOrEmptyArray = <A>(opt: Option<Array<A>>) =>
+  getOrElse([] as Array<A>)(opt)
 
 /**
  * Partially applied version of `getOrElse` providing an empty string
@@ -70,13 +71,6 @@ export const fromTruthyFalsy = <A>(x: A): Option<A> =>
  */
 export const toBoolean = <A>(x: Option<A>): boolean => fold(x, false, constTrue)
 
-/**
- * Prism constructor function
- */
-export const prism = <S, A>(reverseGet: (b: A) => S) => (
-  getOption: (s: S) => Option<A>,
-) => new Prism(getOption, reverseGet)
-
 /**
  * Folds an option down into either an empty array or a single-element array containing
  * the value from within the Some. Useful in conjunction with the spread operator.
diff --git a/src/sharedHelpers/fp-ts-ext/Ord.ts b/src/sharedHelpers/fp-ts-ext/Ord.ts
new file mode 100644
index 000000000..f2645b9af
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/Ord.ts
@@ -0,0 +1,61 @@
+import { Ord } from 'fp-ts/lib/Ord'
+import { Ordering } from 'fp-ts/lib/Ordering'
+
+import { setoidRecordWithNameLower, setoidStrict } from './Setoid'
+import { toLower } from '../strings'
+
+/**
+ * Determines ordering of two numbers (numeric comparison)
+ */
+export const numericCompare = (x: number, y: number): Ordering =>
+  x < y ? -1 : x > y ? 1 : 0
+
+/**
+ * Ord instance for number
+ */
+export const ordNumeric: Ord<number> = {
+  ...setoidStrict,
+  compare: numericCompare,
+}
+
+/**
+ * Determines ordering of two strings (alphabetic comparison)
+ */
+export const alphaCompare = (x: string, y: string): Ordering =>
+  x < y ? -1 : x > y ? 1 : 0
+
+/**
+ * Ord instance for string
+ */
+export const ordAlpha: Ord<string> = {
+  ...setoidStrict,
+  compare: alphaCompare,
+}
+
+/**
+ * Comparator for RecordWithName, comparing lowercase names alphabetically
+ */
+export const recordWithNameLowerComparator = <
+  A extends {
+    name: string
+  }
+>(
+  a: A,
+  b: A,
+): Ordering => {
+  const nameA = toLower(a.name)
+  const nameB = toLower(b.name)
+  return nameA < nameB ? -1 : nameA > nameB ? 1 : 0
+}
+
+/**
+ * Ord instance for types extending the RecordWithName interface
+ * that does comparisons & equality checking against the name prop
+ * converted to lowercase
+ */
+export const ordRecordWithNameLower: Ord<{
+  name: string
+}> = {
+  ...setoidRecordWithNameLower,
+  compare: recordWithNameLowerComparator,
+}
diff --git a/src/CoreUtils/README.md b/src/sharedHelpers/fp-ts-ext/README.md
similarity index 97%
rename from src/CoreUtils/README.md
rename to src/sharedHelpers/fp-ts-ext/README.md
index 2e3ebe0b9..2f595c5ed 100644
--- a/src/CoreUtils/README.md
+++ b/src/sharedHelpers/fp-ts-ext/README.md
@@ -1,4 +1,4 @@
-# CoreUtils
+# sharedHelpers
 
 This directory is mostly intended to provide utilities not provided
 by the fp-ts ecosystem OR utilities which wrap things from the
diff --git a/src/sharedHelpers/fp-ts-ext/Record.ts b/src/sharedHelpers/fp-ts-ext/Record.ts
new file mode 100644
index 000000000..183caa3ea
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/Record.ts
@@ -0,0 +1,64 @@
+import { Ord } from 'fp-ts/lib/Ord'
+import { sort } from 'fp-ts/lib/Array'
+
+import { forEach } from './Array'
+import { isObject } from '../typeGuards'
+
+/**
+ * Retrieves the keys of an object while retaining keyof type information
+ */
+export const keys = <A extends Record<string, unknown>, K extends keyof A>(
+  x: A,
+): K[] => Object.keys(x) as K[]
+
+/**
+ * Retrieves the value of a given property key from an object (curried)
+ */
+export const prop = <A extends Record<string, unknown>, K extends keyof A>(
+  k: K,
+) => (obj: A): A[K] => obj[k]
+
+/**
+ * Omits the key-value pairs from an object associated with the provided keys
+ */
+export const omit = <A extends Record<string, unknown>, K extends keyof A>(
+  rec: A,
+  ks: K[],
+): { [P in Exclude<keyof A, K>]: A[P] } => {
+  const { ...result } = rec
+
+  forEach(ks, k => delete result[k])
+
+  return result
+}
+
+/**
+ * Picks the key-value pairs from an object associated with the provided keys
+ */
+export const pick = <A extends Record<string, unknown>, K extends keyof A>(
+  rec: A,
+  ks: K[],
+): { [P in K]: A[P] } => {
+  const result = {} as { [P in K]: A[P] }
+
+  forEach(ks, k => {
+    result[k] = rec[k]
+  })
+
+  return result
+}
+
+export const sortRecords = <
+  S extends Record<K, A>,
+  K extends keyof S & string,
+  A extends S[K]
+>(
+  ord: Ord<S>,
+) => <T extends S>(data: Array<T>) => sort<T>(ord)(data)
+
+/**
+ * Type guard for `Record<PropertyKey, T>` from `object`
+ */
+export const isRecord = <T = unknown>(
+  x: unknown,
+): x is Record<PropertyKey, T> => isObject(x)
diff --git a/src/sharedHelpers/fp-ts-ext/Setoid.ts b/src/sharedHelpers/fp-ts-ext/Setoid.ts
new file mode 100644
index 000000000..1662a64c1
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/Setoid.ts
@@ -0,0 +1,49 @@
+import { Setoid, strictEqual } from 'fp-ts/lib/Setoid'
+import { shallowEqual } from '../shallowEqual'
+import { toLower } from '../strings'
+
+/**
+ * Generic setoid that uses strict equality checking
+ */
+export const setoidStrict = { equals: strictEqual }
+
+/**
+ * Function that returns a generic setoid that uses strict equality checking
+ *
+ * NOTE: This only exists in case you need to explicitly provide a generic
+ */
+export const getSetoidStrict = <A>(): Setoid<A> => setoidStrict
+
+/**
+ * Generic setoid that uses shallow equality checking
+ */
+export const setoidShallowEq = { equals: shallowEqual }
+
+/**
+ * Function that returns a generic setoid that uses shallow equality checking
+ *
+ * NOTE: This only exists in case you need to explicitly provide a generic
+ */
+export const getSetoidShallowEq = <A extends object>(): Setoid<A> =>
+  setoidShallowEq
+
+/**
+ * Equality checker for RecordWithName, comparing lowercase names
+ */
+export const recordWithNameLowerEquality = <
+  A extends {
+    name: string
+  }
+>(
+  a: A,
+  b: A,
+): boolean => toLower(a.name) === toLower(b.name)
+
+/**
+ * Setoid for RecordWithName using recordWithNameLowerEquality
+ */
+export const setoidRecordWithNameLower: Setoid<{
+  name: string
+}> = {
+  equals: recordWithNameLowerEquality,
+}
diff --git a/src/CoreUtils/StrMap.ts b/src/sharedHelpers/fp-ts-ext/StrMap.ts
similarity index 51%
rename from src/CoreUtils/StrMap.ts
rename to src/sharedHelpers/fp-ts-ext/StrMap.ts
index 5de32f966..7888ae365 100644
--- a/src/CoreUtils/StrMap.ts
+++ b/src/sharedHelpers/fp-ts-ext/StrMap.ts
@@ -4,4 +4,4 @@ import { StrMap } from 'fp-ts/lib/StrMap'
  * StrMap constructor function
  *
  */
-export const mkStrMap = <A>(object: { [key: string]: A }) => new StrMap(object)
+export const newStrMap = <A>(object: { [key: string]: A }) => new StrMap(object)
diff --git a/src/CoreUtils/Task.ts b/src/sharedHelpers/fp-ts-ext/Task.ts
similarity index 82%
rename from src/CoreUtils/Task.ts
rename to src/sharedHelpers/fp-ts-ext/Task.ts
index 3e572f7b9..a5f07a1e6 100644
--- a/src/CoreUtils/Task.ts
+++ b/src/sharedHelpers/fp-ts-ext/Task.ts
@@ -5,7 +5,7 @@ import { Lazy } from 'fp-ts/lib/function'
  * Task constructor function
  *
  */
-export const mkTask = <A>(f: () => Promise<A>): Task<A> => new Task(f)
+export const newTask = <A>(f: () => Promise<A>): Task<A> => new Task(f)
 
 /**
  * Run a Task (a lazy Promise)
diff --git a/src/CoreUtils/TaskEither.ts b/src/sharedHelpers/fp-ts-ext/TaskEither.ts
similarity index 86%
rename from src/CoreUtils/TaskEither.ts
rename to src/sharedHelpers/fp-ts-ext/TaskEither.ts
index 01ab99bd1..b9e2a6331 100644
--- a/src/CoreUtils/TaskEither.ts
+++ b/src/sharedHelpers/fp-ts-ext/TaskEither.ts
@@ -7,7 +7,7 @@ import { Lazy } from 'fp-ts/lib/function'
  * TaskEither constructor function
  *
  */
-export const mkTaskEither = <L, A>(
+export const newTaskEither = <L, A>(
   task: Task<Either<L, A>>,
 ): TaskEither<L, A> => new TaskEither(task)
 
@@ -23,4 +23,4 @@ export const runTaskEither = <L, A>(
  */
 export const constRunTaskEither = <L, A>(
   x: TaskEither<L, A>,
-): Lazy<Promise<Either<L, A>>> => x.run
+): Lazy<Promise<Either<L, A>>> => x.value.run
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/Array.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/Array.jest.ts
new file mode 100644
index 000000000..d8dfd2f76
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/Array.jest.ts
@@ -0,0 +1,239 @@
+import { array } from 'fp-ts/lib/Array'
+import { left, right, Either } from 'fp-ts/lib/Either'
+import { IO } from 'fp-ts/lib/IO'
+import { some } from 'fp-ts/lib/Option'
+
+import {
+  all,
+  any,
+  concat,
+  concatFlipped,
+  contains,
+  forEach,
+  forEachWithIndex,
+  intersperse,
+  intersperseMap,
+  intersperseMapWithIndex,
+  LeftsAndRights,
+  leftsAndRights,
+  len,
+  liftOption2,
+  map,
+  notAny,
+  runIOs,
+  sequenceEithers,
+  sequenceOptions,
+  sequenceTasks,
+  sequenceTaskEithers,
+  sortByAlpha,
+  sortByNumeric,
+} from '../Array'
+
+const isGreaterThanZero = (x: number): boolean => x > 0
+
+describe('all', () => {
+  it('should return false when a member of the array does not hold true for a predicate', () => {
+    const actual = all([-1, 0, 1, 2, 3], isGreaterThanZero)
+    const expected = false
+    expect(actual).toBe(expected)
+  })
+
+  it('should return true when a predicate holds true for all members of an array', () => {
+    const actual = all([1, 2, 3, 4, 5], isGreaterThanZero)
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('any', () => {
+  it('should return true when a predicate holds true for any member of an array', () => {
+    const actual = any([-5, 0, -3, 2], isGreaterThanZero)
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return false when a predicate holds true for no members of an array', () => {
+    const actual = any([-5, -4, -3, -2, -1], isGreaterThanZero)
+    const expected = false
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('concat', () => {
+  it('should concatenate arrays correctly', () => {
+    const actual = concat([0])([1])
+    const expected = array.alt([0], [1])
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('concatFlipped should concatenate arrays correctly', () => {
+  it('should concatenate arrays correctly', () => {
+    const actual = concatFlipped([1])([0])
+    const expected = array.alt([1], [0])
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('contains', () => {
+  it('should return true when an array contains an element', () => {
+    const actual = contains(0)([0, 1, 2])
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return false when an array does not contain an element', () => {
+    const actual = contains(5)([0, 1, 2])
+    const expected = false
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('forEach', () => {
+  it('should perform a side-effect using each elem of the array', () => {
+    const getActual = (seed: number) => {
+      let mut = seed
+      forEach([0, 1, 2, 3, 4], x => (mut += x))
+      return mut
+    }
+    const actual = getActual(0)
+    const expected = 10
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('forEachWithIndex', () => {
+  it('should perform a side-effect using each elem & index of the array', () => {
+    const getActual = (seed: number) => {
+      let mut = seed
+      forEachWithIndex([0, 1, 2, 3, 4], (x, i) => (mut += x + i))
+      return mut
+    }
+    const actual = getActual(0)
+    const expected = 20
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('intersperse', () => {
+  it('should insert a value in between all elements of an array', () => {
+    const actual = intersperse('_', ['a', 'b', 'c'])
+    const expected = ['a', '_', 'b', '_', 'c']
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('intersperseMap', () => {
+  it('should insert the value returned by a function in between all elements of an array', () => {
+    const actual = intersperseMap(x => `${x}_`, ['a', 'b', 'c'])
+    const expected = ['a', 'a_', 'b', 'b_', 'c']
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('intersperseMapWithIndex', () => {
+  it('should insert the value returned by a function in between all elements of an array', () => {
+    const actual = intersperseMapWithIndex((x, i) => `${i}_`, ['a', 'b', 'c'])
+    const expected = ['a', '0_', 'b', '1_', 'c']
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('leftsAndRights', () => {
+  it('should separate & extract the lefts & rights in an array of eithers', () => {
+    const eithers: Array<Either<string, number>> = [
+      left('error'),
+      right(0),
+      right(5),
+    ]
+    const actual = leftsAndRights(eithers)
+    const expected: LeftsAndRights<string, number> = {
+      lefts: ['error'],
+      rights: [0, 5],
+    }
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('sortByAlpha', () => {
+  it('should sort a list of strings alphabetically', () => {
+    const actual = sortByAlpha(['blueberry', 'apple', 'cranberry'])
+    const expected = ['apple', 'blueberry', 'cranberry']
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('sortByNumeric', () => {
+  it('should sort a list of strings numerically', () => {
+    const actual = sortByNumeric([5, 3, 7, 4])
+    const expected = sortByNumeric([3, 4, 5, 7])
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('len', () => {
+  it('should return the length of an array', () => {
+    const a = [0, 1, 2, 3]
+    const actual = a.length
+    const expected = len(a)
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('liftOption2', () => {
+  it('should lift a function of 2 args into the context of Option', () => {
+    const add = (x: number) => (y: number) => x + y
+    const addOpt = liftOption2(add)
+    const actual = addOpt(some(3))(some(5)).getOrElse(0)
+    const expected = 8
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('map', () => {
+  it('should transform the values in an array', () => {
+    const a = [0, 1, 2, 3]
+    const actual = map((x: number) => x + 1)(a)
+    const expected = [1, 2, 3, 4]
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('notAny', () => {
+  it('should return false when a predicate holds true for any member of an array', () => {
+    const actual = notAny([-5, 0, -3, 2], isGreaterThanZero)
+    const expected = false
+    expect(actual).toBe(expected)
+  })
+
+  it('should return true when a predicate holds true for no members of an array', () => {
+    const actual = notAny([-5, -4, -3, -2, -1], isGreaterThanZero)
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('runIOs', () => {
+  it('run a series of side-effects contained within IOs', () => {
+    const getActual = (seed: number) => {
+      let mut = seed
+      const ios: Array<IO<void>> = [
+        new IO(() => {
+          mut += 1
+        }),
+        new IO(() => {
+          mut += 3
+        }),
+        new IO(() => {
+          mut += 5
+        }),
+      ]
+      runIOs(ios)
+      return mut
+    }
+
+    const actual = getActual(0)
+    const expected = 9
+    expect(actual).toBe(expected)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/Either.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/Either.jest.ts
new file mode 100644
index 000000000..3088910cd
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/Either.jest.ts
@@ -0,0 +1,18 @@
+import { fold } from '../Either'
+import { left, right } from 'fp-ts/lib/Either'
+
+describe('fold (Either)', () => {
+  const f = (l: string) => `Error: ${l}`
+  const g = (r: number) => `Value: ${r}`
+  it('should properly fold Eithers -- left', () => {
+    const actual = fold(left<string, number>('invalid'), f, g)
+    const expected = 'Error: invalid'
+    expect(actual).toBe(expected)
+  })
+
+  it('should properly fold Eithers -- left', () => {
+    const actual = fold(right<string, number>(9), f, g)
+    const expected = 'Value: 9'
+    expect(actual).toBe(expected)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/IO.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/IO.jest.ts
new file mode 100644
index 000000000..40f4c8406
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/IO.jest.ts
@@ -0,0 +1,58 @@
+import { IO } from 'fp-ts/lib/IO'
+import { constRunIO, newIO, noOpIO, runIO } from '../IO'
+
+describe('constRunIO', () => {
+  let num = 0
+  const mutateNumIO = new IO(() => {
+    num = 3
+  })
+  it('should return the run function for an IO<A>', () => {
+    const actual = constRunIO(mutateNumIO)()
+    const expected = mutateNumIO.run()
+    expect(actual).toBe(expected)
+    expect(num).toBe(3)
+  })
+})
+
+describe('newIO', () => {
+  let num = 0
+  const mutateNumIO = new IO(() => {
+    num = 5
+  })
+  const mutateNumIO_ = newIO(() => {
+    num = 5
+  })
+  it('should create an IO<A>', () => {
+    const actual = mutateNumIO.run()
+    const expected = mutateNumIO_.run()
+    expect(actual).toBe(expected)
+    expect(num).toBe(5)
+  })
+})
+
+describe('noOpIO', () => {
+  it('should be a noOp function', () => {
+    const actual = noOpIO.run.toString()
+    const expected = 'function constVoid() {}'
+    expect(actual).toBe(expected)
+  })
+
+  it('should return void', () => {
+    const actual = noOpIO.run()
+    const expected = undefined
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('runIO', () => {
+  it('should run a possibly effectful function in IO', () => {
+    let num = 0
+    const mutateNumIO = new IO(() => {
+      num = 2
+    })
+    const actual = runIO(mutateNumIO)
+    const expected = mutateNumIO.run()
+    expect(actual).toBe(expected)
+    expect(num).toBe(2)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/Option.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/Option.jest.ts
new file mode 100644
index 000000000..9ff630ef0
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/Option.jest.ts
@@ -0,0 +1,164 @@
+import { createElement } from 'react'
+import {
+  fold,
+  fromTruthyFalsy,
+  getOrElse,
+  getOrEmptyArray,
+  getOrEmptyString,
+  getOrZero,
+  isOption,
+  renderOnSome,
+  toBoolean,
+  toSpreadable,
+} from '../Option'
+import { Option, none, some } from 'fp-ts/lib/Option'
+
+describe('fold (Option)', () => {
+  it('should properly fold Options -- some', () => {
+    const actual = fold(some(3), 0, x => x + 1)
+    const expected = 4
+    expect(actual).toBe(expected)
+  })
+
+  it('should properly fold Options -- none', () => {
+    const actual = fold(none, 0, x => x - 1)
+    const expected = 0
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('fromTruthyFalsy', () => {
+  it('should return a none when given a Falsy value', () => {
+    const actual = fromTruthyFalsy(0)
+    const expected = none
+    expect(actual).toEqual(expected)
+  })
+
+  it('should return a Some<A> when given a Truthy value', () => {
+    const actual = fromTruthyFalsy({ value: 33 })
+    const expected = some({ value: 33 })
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('getOrElse', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = getOrElse(0)(some(5))
+    const expected = 5
+    expect(actual).toBe(expected)
+  })
+
+  it('should return a default value when given a none', () => {
+    const actual = getOrElse(0)(none)
+    const expected = 0
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('getOrEmptyArray', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = getOrEmptyArray(some([0, 1, 2, 3]))
+    const expected = [0, 1, 2, 3]
+    expect(actual).toEqual(expected)
+  })
+
+  it('should return an empty array when given a none', () => {
+    const actual = getOrEmptyArray(none)
+    const expected: Array<number> = []
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('getOrEmptyString', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = getOrEmptyString(some('testing'))
+    const expected = 'testing'
+    expect(actual).toBe(expected)
+  })
+
+  it('should return an empty string when given a none', () => {
+    const actual = getOrEmptyString(none)
+    const expected: string = ''
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('getOrZero', () => {
+  it('should extract the value from a some when given a some', () => {
+    const actual = getOrZero(some(33))
+    const expected = 33
+    expect(actual).toBe(expected)
+  })
+
+  it('should return 0 when given a none', () => {
+    const actual = getOrZero(none)
+    const expected = 0
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('isOption', () => {
+  it('should return true if the value is an Option<A>', () => {
+    const actual = isOption(some(3))
+    const expected = true
+    expect(actual).toBe(expected)
+  })
+
+  it('should return false if the value is not an Option<A>', () => {
+    const actual = isOption({ _tag: 'Some' })
+    const expected = false
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('renderOnSome', () => {
+  it('should return null when given a none', () => {
+    const numOpt: Option<number> = none
+    const actual = renderOnSome(numOpt, x =>
+      createElement('h1', {}, `Num: ${x}`),
+    )
+    const expected = null
+    expect(actual).toBe(expected)
+  })
+
+  it('should return a ReactNode when given a some', () => {
+    const numOpt: Option<number> = some(3)
+    const actual = renderOnSome(numOpt, x =>
+      createElement('h1', {}, `Num: ${x}`),
+    )
+    const expected = createElement('h1', {}, 'Num: 3')
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('toBoolean', () => {
+  it('should return false when given a none', () => {
+    const actual = toBoolean(none)
+    const expected = false
+    expect(actual).toEqual(expected)
+  })
+
+  it('should return true when given a some', () => {
+    const actual = toBoolean(some(3))
+    const expected = true
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('toSpreadable', () => {
+  it('should return an empty array when given a none', () => {
+    const numOpt: Option<number> = none
+    const actual = toSpreadable(numOpt)
+    const expected: Array<number> = []
+    expect(actual).toEqual(expected)
+    expect([...actual]).toEqual(expected)
+  })
+
+  it('should return an array containing one element when given a some', () => {
+    const numOpt: Option<number> = some(2)
+    const actual = toSpreadable(numOpt)
+    const expected: Array<number> = [2]
+    expect(actual).toEqual(expected)
+    expect([...actual]).toEqual(expected)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.ts
new file mode 100644
index 000000000..7646b6da6
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/Ord.jest.ts
@@ -0,0 +1,108 @@
+import { strictEqual } from 'fp-ts/lib/Setoid'
+import {
+  alphaCompare,
+  numericCompare,
+  ordAlpha,
+  ordNumeric,
+  ordRecordWithNameLower,
+  recordWithNameLowerComparator,
+} from '../Ord'
+
+describe('ordAlpha', () => {
+  it('should contain a `compare` function that orders alphabetically', () => {
+    const actualA = ordAlpha.compare('c', 'a')
+    const expectedA = alphaCompare('c', 'a')
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(1)
+
+    const actualB = ordAlpha.compare('b', 'b')
+    const expectedB = alphaCompare('b', 'b')
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(0)
+
+    const actualC = ordAlpha.compare('d', 'q')
+    const expectedC = alphaCompare('d', 'q')
+    expect(actualC).toBe(expectedC)
+    expect(actualC).toBe(-1)
+  })
+
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = ordAlpha.equals('c', 'a')
+    const expectedA = strictEqual('c', 'a')
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(false)
+
+    const actualB = ordAlpha.equals('b', 'b')
+    const expectedB = strictEqual('b', 'b')
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(true)
+  })
+})
+
+describe('ordNumeric', () => {
+  it('should contain a `compare` function that orders alphabetically', () => {
+    const actualA = ordNumeric.compare(3, -2)
+    const expectedA = numericCompare(3, -2)
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(1)
+
+    const actualB = ordNumeric.compare(2, 2)
+    const expectedB = numericCompare(2, 2)
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(0)
+
+    const actualC = ordNumeric.compare(-5, 4)
+    const expectedC = numericCompare(-5, 4)
+    expect(actualC).toBe(expectedC)
+    expect(actualC).toBe(-1)
+  })
+
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = ordNumeric.equals(3, -2)
+    const expectedA = strictEqual(3, -2)
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(false)
+
+    const actualB = ordNumeric.equals(2, 2)
+    const expectedB = strictEqual(2, 2)
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(true)
+  })
+})
+
+describe('ordRecordWithNameLower', () => {
+  it('should compare { name: string } records by lowercase alpha', () => {
+    const actualA = ordRecordWithNameLower.compare(
+      { name: 'Josh' },
+      { name: 'adam' },
+    )
+    const expectedA = recordWithNameLowerComparator(
+      { name: 'Josh' },
+      { name: 'adam' },
+    )
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(1)
+
+    const actualB = ordRecordWithNameLower.compare(
+      { name: 'emily' },
+      { name: 'Luke' },
+    )
+    const expectedB = recordWithNameLowerComparator(
+      { name: 'emily' },
+      { name: 'Luke' },
+    )
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(-1)
+
+    const actualC = ordRecordWithNameLower.compare(
+      { name: 'David' },
+      { name: 'david' },
+    )
+    const expectedC = recordWithNameLowerComparator(
+      { name: 'David' },
+      { name: 'david' },
+    )
+    expect(actualC).toBe(expectedC)
+    expect(actualC).toBe(0)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/Record.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/Record.jest.ts
new file mode 100644
index 000000000..dfbebc923
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/Record.jest.ts
@@ -0,0 +1,58 @@
+import { keys, prop, omit, pick, sortRecords } from '../Record'
+import { ordRecordWithNameLower } from '../Ord'
+
+describe('keys', () => {
+  it('should return the keys of an object', () => {
+    const o = { a: 0, b: 'value', c: { nested: 'value' } }
+    const actual = keys(o)
+    const expected = Object.keys(o) as Array<'a' | 'b' | 'c'>
+    expect(actual).toEqual(expected)
+    expect(actual).toEqual(['a', 'b', 'c'])
+  })
+})
+
+describe('prop', () => {
+  it('should return the value at a key in an object', () => {
+    const o = { a: 0, b: 'value', c: { nested: 'value' } }
+    const actual = prop<typeof o, 'b'>('b')(o)
+    const expected = o.b
+    expect(actual).toBe(expected)
+    expect(actual).toBe('value')
+  })
+})
+
+describe('omit', () => {
+  it('should exclude key-val pairs associated with the given keys', () => {
+    const o = { a: 0, b: 'value', c: { nested: 'value' } }
+    const actual = omit(o, ['c'])
+    const expected = { a: 0, b: 'value' }
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('pick', () => {
+  it('should include key-val pairs associated with the given keys', () => {
+    const o = { a: 0, b: 'value', c: { nested: 'value' } }
+    const actual = pick(o, ['c', 'a'])
+    const expected = { a: 0, c: { nested: 'value' } }
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('sortRecords', () => {
+  it('should sort records by an zord', () => {
+    type Rec = { name: string; extra: number }
+    const recs: Array<Rec> = [
+      { name: 'Josh', extra: 0 },
+      { name: 'mike', extra: 1 },
+      { name: 'Adam', extra: 3 },
+    ]
+    const actual = sortRecords(ordRecordWithNameLower)(recs)
+    const expected = [
+      { name: 'Adam', extra: 3 },
+      { name: 'Josh', extra: 0 },
+      { name: 'mike', extra: 1 },
+    ]
+    expect(actual).toEqual(expected)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.ts
new file mode 100644
index 000000000..794cae5ce
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/Setoid.jest.ts
@@ -0,0 +1,95 @@
+import { strictEqual } from 'fp-ts/lib/Setoid'
+import { shallowEqual } from '../../shallowEqual'
+
+import {
+  getSetoidShallowEq,
+  getSetoidStrict,
+  recordWithNameLowerEquality,
+  setoidRecordWithNameLower,
+  setoidShallowEq,
+  setoidStrict,
+} from '../Setoid'
+
+describe('setoidShallowEq', () => {
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = setoidShallowEq.equals({ value: 'c' }, { value: 'a' })
+    const expectedA = shallowEqual({ value: 'c' }, { value: 'a' })
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(false)
+
+    const actualB = setoidShallowEq.equals({ value: 'b' }, { value: 'b' })
+    const expectedB = shallowEqual({ value: 'b' }, { value: 'b' })
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(true)
+  })
+})
+
+describe('setoidStrict', () => {
+  it('should contain an `equals` function using strict equality (===)', () => {
+    const actualA = setoidStrict.equals('c', 'a')
+    const expectedA = strictEqual('c', 'a')
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(false)
+
+    const actualB = setoidStrict.equals('b', 'b')
+    const expectedB = strictEqual('b', 'b')
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(true)
+  })
+})
+
+describe('getSetoidShallowEq', () => {
+  it('should contain a setoid equivalent to setoidShallowEq', () => {
+    const s = getSetoidShallowEq<{ value: string }>()
+    const actual = s.equals({ value: 'c' }, { value: 'a' })
+    const expected = shallowEqual({ value: 'c' }, { value: 'a' })
+    expect(actual).toBe(expected)
+    expect(actual).toBe(false)
+
+    const actualB = s.equals({ value: 'b' }, { value: 'b' })
+    const expectedB = shallowEqual({ value: 'b' }, { value: 'b' })
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(true)
+  })
+})
+
+describe('getSetoidStrict', () => {
+  it('should contain a setoid equivalent to setoidStrict', () => {
+    const s = getSetoidStrict<string>()
+    const actualA = s.equals('c', 'a')
+    const expectedA = strictEqual('c', 'a')
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(false)
+
+    const actualB = s.equals('b', 'b')
+    const expectedB = strictEqual('b', 'b')
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(true)
+  })
+})
+
+describe('setoidRecordWithNameLower', () => {
+  it('should compare { name: string } records by lowercase alpha', () => {
+    const actualA = setoidRecordWithNameLower.equals(
+      { name: 'Josh B' },
+      { name: 'josh B' },
+    )
+    const expectedA = recordWithNameLowerEquality(
+      { name: 'Josh B' },
+      { name: 'josh B' },
+    )
+    expect(actualA).toBe(expectedA)
+    expect(actualA).toBe(true)
+
+    const actualB = setoidRecordWithNameLower.equals(
+      { name: 'Josh B' },
+      { name: 'joshua B' },
+    )
+    const expectedB = recordWithNameLowerEquality(
+      { name: 'Josh B' },
+      { name: 'joshua B' },
+    )
+    expect(actualB).toBe(expectedB)
+    expect(actualB).toBe(false)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.ts
new file mode 100644
index 000000000..7c2544769
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/StrMap.jest.ts
@@ -0,0 +1,23 @@
+import { StrMap } from 'fp-ts/lib/StrMap'
+import { newStrMap } from '../StrMap'
+
+describe('newStrMap', () => {
+  it('should create a StrMap<A>', () => {
+    const actualA = newStrMap({
+      a: 0,
+      b: 1,
+      c: 2,
+    })
+    const expectedA = new StrMap({
+      a: 0,
+      b: 1,
+      c: 2,
+    })
+    expect(actualA).toEqual(expectedA)
+    expect(actualA.value).toEqual({
+      a: 0,
+      b: 1,
+      c: 2,
+    })
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/Task.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/Task.jest.ts
new file mode 100644
index 000000000..d5f0556dd
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/Task.jest.ts
@@ -0,0 +1,33 @@
+import { Task } from 'fp-ts/lib/Task'
+import { constRunTask, newTask, runTask } from '../Task'
+
+describe('constRunTask', () => {
+  const numTask = new Task(() => Promise.resolve(3))
+  it('should return the run function for a Task<A>', () => {
+    const actual = constRunTask(numTask)()
+    const expected = numTask.run()
+    expect(actual).toEqual(expected)
+    expect(actual).toEqual(Promise.resolve(3))
+  })
+})
+
+describe('newTask', () => {
+  const numTask = new Task(() => Promise.resolve(5))
+  const numTask_ = newTask(() => Promise.resolve(5))
+  it('should create a Task<A>', () => {
+    const actual = numTask.run()
+    const expected = numTask_.run()
+    expect(actual).toEqual(expected)
+    expect(actual).toEqual(Promise.resolve(5))
+  })
+})
+
+describe('runTask', () => {
+  it('should run a Task', () => {
+    const t = new Task(() => Promise.resolve(2))
+    const actual = runTask(t)
+    const expected = t.run()
+    expect(actual).toEqual(expected)
+    expect(actual).toEqual(Promise.resolve(2))
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.ts
new file mode 100644
index 000000000..e227e2776
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/TaskEither.jest.ts
@@ -0,0 +1,43 @@
+import { left, right } from 'fp-ts/lib/Either'
+import { Task } from 'fp-ts/lib/Task'
+import { TaskEither } from 'fp-ts/lib/TaskEither'
+import { constRunTaskEither, newTaskEither, runTaskEither } from '../TaskEither'
+
+describe('constRunTaskEither', () => {
+  it('should return the run function for a TaskEither<L, A>', () => {
+    const te = new TaskEither(
+      new Task(() => Promise.resolve(right<string, number>(3))),
+    )
+    const actual = constRunTaskEither(te)()
+    const expected = te.run()
+    expect(actual).toEqual(expected)
+    expect(actual).toEqual(Promise.resolve(right<string, number>(3)))
+  })
+})
+
+describe('newTaskEither', () => {
+  it('should create a TaskEither<L, A>', () => {
+    const te = new TaskEither(
+      new Task(() => Promise.resolve(left<string, number>('error'))),
+    )
+    const te_ = newTaskEither(
+      new Task(() => Promise.resolve(left<string, number>('error'))),
+    )
+    const actual = te.run()
+    const expected = te_.run()
+    expect(actual).toEqual(expected)
+    expect(actual).toEqual(Promise.resolve(left<string, number>('error')))
+  })
+})
+
+describe('runTaskEither', () => {
+  it('should run a TaskEither<L, A>', () => {
+    const te = new TaskEither(
+      new Task(() => Promise.resolve(right<string, number>(2))),
+    )
+    const actual = runTaskEither(te)
+    const expected = te.run()
+    expect(actual).toEqual(expected)
+    expect(actual).toEqual(Promise.resolve(right<string, number>(2)))
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/__tests__/function.jest.ts b/src/sharedHelpers/fp-ts-ext/__tests__/function.jest.ts
new file mode 100644
index 000000000..74c8d60d3
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/__tests__/function.jest.ts
@@ -0,0 +1,66 @@
+import { constVoid, flip_, o, swap, tuple } from '../function'
+
+describe('constVoid', () => {
+  it('should be a noOp function', () => {
+    const actual = constVoid.toString()
+    const expected = 'function constVoid() {}'
+    expect(actual).toBe(expected)
+  })
+
+  it('should return void', () => {
+    const actual = constVoid()
+    const expected = undefined
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('flip_', () => {
+  it('should flip the order of the arguments of an uncurried function', () => {
+    const f = (x: number, y: string): string => `${x}${y}`
+    const g = flip_(f)
+    const num = 4
+    const str = '2'
+    const actual = g(str, num)
+    const expected = f(num, str)
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('o', () => {
+  it('should compose 2 functions together properly', () => {
+    const init = 3
+    const add1 = (x: number): number => x + 1
+    const showNum = (x: number): string => `${x}`
+    const actual = o(showNum, add1)(init)
+    const expected = showNum(add1(init))
+    expect(actual).toBe(expected)
+  })
+})
+
+describe('swap', () => {
+  it('should swap the order of arguments in a 2-tuple', () => {
+    const actual = swap([0, 1])
+    const expected = [1, 0]
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('tuple', () => {
+  it('should create a 2-tuple', () => {
+    const actual = tuple(0, 1)
+    const expected = [0, 1] as [0, 1]
+    expect(actual).toEqual(expected)
+  })
+
+  it('should create a 3-tuple', () => {
+    const actual = tuple(0, 1, 2)
+    const expected = [0, 1, 2] as [0, 1, 2]
+    expect(actual).toEqual(expected)
+  })
+
+  it('should create a 4-tuple', () => {
+    const actual = tuple(0, 1, 2, 3)
+    const expected = [0, 1, 2, 3] as [0, 1, 2, 3]
+    expect(actual).toEqual(expected)
+  })
+})
diff --git a/src/sharedHelpers/fp-ts-ext/function.ts b/src/sharedHelpers/fp-ts-ext/function.ts
new file mode 100644
index 000000000..b6f4cdc00
--- /dev/null
+++ b/src/sharedHelpers/fp-ts-ext/function.ts
@@ -0,0 +1,30 @@
+import { Function2 } from 'fp-ts/lib/function'
+
+import { Primitive } from '../typeLevel'
+
+export const constVoid = (): void => {}
+
+/**
+ * Flips the order of the arguments to an uncurried function taking two
+ * arguments. Like `flip`, but for uncurried, not curried, functions.
+ */
+export const flip_ = <A, B, C>(f: Function2<A, B, C>): Function2<B, A, C> => (
+  b,
+  a,
+) => f(a, b)
+
+/**
+ * Simple binary composition. Also known as `compose2`
+ */
+export const o = <A, B, C>(f: (y: B) => C, g: (x: A) => B) => (x: A): C =>
+  f(g(x))
+
+/**
+ * Utility for constructing tuples with proper inference
+ */
+export const tuple = <A extends Primitive[]>(...args: A) => args
+
+/**
+ * Flips the position of each item in a 2-tuple
+ */
+export const swap = <A, B>([x, y]: [A, B]): [B, A] => [y, x]
diff --git a/src/sharedHelpers/function.ts b/src/sharedHelpers/function.ts
new file mode 100644
index 000000000..600eed89f
--- /dev/null
+++ b/src/sharedHelpers/function.ts
@@ -0,0 +1,20 @@
+import { Function2 } from 'fp-ts/lib/function'
+
+import { isNil, isNumber, isFalse, isEmptyString, isZero } from './typeGuards'
+
+export const constVoid = (): void => {}
+
+/**
+ * Flips the order of the arguments to an uncurried function taking two
+ * arguments.
+ */
+export const flip_ = <A, B, C>(f: Function2<A, B, C>): Function2<B, A, C> => (
+  b,
+  a,
+) => f(a, b)
+
+/**
+ * Simple binary composition. Also known as `compose2`
+ */
+export const o = <A, B, C>(f: (y: B) => C, g: (x: A) => B) => (x: A): C =>
+  f(g(x))
diff --git a/src/CoreUtils/json-encoders-decoders.ts b/src/sharedHelpers/jsonEncodersDecoders.ts
similarity index 94%
rename from src/CoreUtils/json-encoders-decoders.ts
rename to src/sharedHelpers/jsonEncodersDecoders.ts
index cd07cdd6c..51085709b 100644
--- a/src/CoreUtils/json-encoders-decoders.ts
+++ b/src/sharedHelpers/jsonEncodersDecoders.ts
@@ -2,9 +2,9 @@ import * as t from 'io-ts'
 import { Option, None, Some, none, fromEither } from 'fp-ts/lib/Option'
 import { error } from 'fp-ts/lib/Console'
 import { IO } from 'fp-ts/lib/IO'
-import { Getter } from 'monocle-ts'
+import { Getter, Lens } from 'monocle-ts'
 import { constant } from 'fp-ts/lib/function'
-import { constVoid } from '@monorail/CoreUtils/general'
+import { constVoid } from '@monorail/sharedHelpers/fp-ts-ext/function'
 
 export type JSONNone = { _tag: 'None' }
 export type JSONSome<A> = { _tag: 'Some'; value: A }
@@ -83,7 +83,9 @@ export const createOptionFromJSON = <C extends t.Mixed>(
  */
 export const mkJSONOptionDecoderSelector = <A>(
   codec: t.Type<Option<A>, JSONOption<A>, t.mixed>,
-) => <S>(getter: Getter<S, JSONOption<A>>) => (s: S): Option<A> => {
+) => <S>(getter: Getter<S, JSONOption<A>> | Lens<S, JSONOption<A>>) => (
+  s: S,
+): Option<A> => {
   const encoded = getter.get(s)
   const decoded = codec.decode(encoded)
 
diff --git a/src/CoreUtils/newtypes.ts b/src/sharedHelpers/newtypes.ts
similarity index 65%
rename from src/CoreUtils/newtypes.ts
rename to src/sharedHelpers/newtypes.ts
index 0d2c94a57..05f156ff4 100644
--- a/src/CoreUtils/newtypes.ts
+++ b/src/sharedHelpers/newtypes.ts
@@ -5,10 +5,5 @@ import { Newtype, prism } from 'newtype-ts'
  */
 export interface NaN extends Newtype<{ readonly NaN: unique symbol }, number> {}
 
-/**
- * Alias for Number.isNaN
- */
-export const isNewtypeNaN = Number.isNaN
-
 // use this prism to return an option with prismNaN.getOption(someNumber)
-export const prismNaN = prism<NaN>(isNewtypeNaN)
+export const prismNaN = prism<NaN>(Number.isNaN)
diff --git a/src/CoreUtils/optics.ts b/src/sharedHelpers/optics.ts
similarity index 69%
rename from src/CoreUtils/optics.ts
rename to src/sharedHelpers/optics.ts
index 838390f62..bb9ac7f9a 100644
--- a/src/CoreUtils/optics.ts
+++ b/src/sharedHelpers/optics.ts
@@ -1,6 +1,6 @@
 import { Lens, Optional } from 'monocle-ts'
 import { insert, lookup } from 'fp-ts/lib/Record'
-import { array, cons, index, insertAt } from 'fp-ts/lib/Array'
+import { array, cons, index, updateAt } from 'fp-ts/lib/Array'
 
 /**
  * Binary composition for lenses (`monocle-ts`)
@@ -40,17 +40,18 @@ export type ExtractAFromLens<L extends Lens<any, any>> = L extends Lens<
  * when passed an object
  */
 export const lensesFromRecord = <
-  A extends { [key: string]: unknown },
+  A extends Record<string, unknown>,
   K extends keyof A & string,
   LensRecord extends { [P in K]: Lens<A, A[P]> },
-  LensRecord_ extends { [key: string]: Lens<A, A[K]> }
+  IndexedLensRecord extends Record<string, Lens<A, A[K]>>
 >(
   x: A,
 ): LensRecord => {
-  const result = {} as LensRecord & LensRecord_
+  type LensRecord_ = LensRecord & IndexedLensRecord
+  let result = {} as LensRecord_
 
-  for (const k of Object.keys(x)) {
-    result[k] = Lens.fromProp<A>()(k as K)
+  for (const k of Object.keys(x) as Array<K>) {
+    result = insert(k, Lens.fromProp<A>()(k), result) as LensRecord_
   }
 
   return result
@@ -62,16 +63,18 @@ export const lensesFromRecord = <
 export const mkArrayIndexOptional = <S extends Array<A>, A>(i: number) =>
   new Optional<S, A>(
     xs => index(i, xs),
-    a => xs => insertAt(i, a, xs).fold(array.of(a), ys => cons(a, ys)) as S,
+    a => xs => updateAt(i, a, xs).fold(array.of(a), ys => cons(a, ys)) as S,
   )
 
 /**
  * Creates an Optional optic for a given key K in some Record<K, A>
+ *
+ * TODO: Consider rewriting this in a different way
  */
 export const mkRecordKeyOptional = <
-  S extends Record<K, A>,
-  K extends keyof S & string,
-  A extends S[K]
+  S extends Record<string, S[K]>,
+  K extends keyof S & string
 >(
   k: K,
-) => new Optional<S, A>(s => lookup(k, s), a => obj => insert(k, a, obj) as S)
+) =>
+  new Optional<S, S[K]>(s => lookup(k, s), a => obj => insert(k, a, obj) as S)
diff --git a/src/CoreUtils/shallowEqual.ts b/src/sharedHelpers/shallowEqual.ts
similarity index 100%
rename from src/CoreUtils/shallowEqual.ts
rename to src/sharedHelpers/shallowEqual.ts
diff --git a/src/CoreUtils/String.ts b/src/sharedHelpers/strings.ts
similarity index 62%
rename from src/CoreUtils/String.ts
rename to src/sharedHelpers/strings.ts
index 8465a0ccf..2b6d1db09 100644
--- a/src/CoreUtils/String.ts
+++ b/src/sharedHelpers/strings.ts
@@ -1,11 +1,8 @@
 import { head, last } from 'fp-ts/lib/Array'
 import { Option, none, some } from 'fp-ts/lib/Option'
-import { Ord } from 'fp-ts/lib/Ord'
-import { Ordering } from 'fp-ts/lib/Ordering'
-import { strictEqual } from 'fp-ts/lib/Setoid'
 
-import { o } from './general'
-import { getOrEmptyString } from './Option'
+import { o } from './fp-ts-ext/function'
+import { getOrEmptyString } from './fp-ts-ext/Option'
 
 /**
  * Given a string or RegExp separator and a string, splits a string into an
@@ -13,10 +10,25 @@ import { getOrEmptyString } from './Option'
  */
 export const split = (sep: string | RegExp) => (xs: string) => xs.split(sep)
 
+/**
+ * Replaces text in a string, using an object that supports replacement within a string.
+ */
+export const replace = (
+  searchValue: {
+    [Symbol.replace](string: string, replaceValue: string): string
+  },
+  replaceValue: string,
+) => (xs: string) => xs.replace(searchValue, replaceValue)
+
 /**
  * Translates a space separated name string into a first & last name record
  */
-export const splitName = (name: string): Record<'first' | 'last', string> => {
+export const splitName = (
+  name: string,
+): {
+  first: string
+  last: string
+} => {
   const xs = split(' ')(name)
   const safeGetVia = (f: (as: string[]) => Option<string>) =>
     o(getOrEmptyString, f)(xs)
@@ -43,26 +55,6 @@ export const findIndex = (substring: string) => (
  */
 export const toLower = (x: string) => x.toLowerCase()
 
-/**
- * Converts all alphabetic characters to lowercase, taking into account the
- * host environment's current locale.
- */
-export const toLocaleLower = (x: string) => x.toLocaleLowerCase()
-
-/**
- * Determines ordering of two strings (alphabetic comparison)
- */
-export const alphaCompare = (x: string, y: string): Ordering =>
-  x < y ? -1 : x > y ? 1 : 0
-
-/**
- * Ord instance for string
- */
-export const ordAlpha: Ord<string> = {
-  equals: strictEqual,
-  compare: alphaCompare,
-}
-
 /**
  * Takes a string and removes the spaces at the end of strings
  */
diff --git a/src/CoreUtils/tagged-unions.ts b/src/sharedHelpers/taggedUnions.ts
similarity index 72%
rename from src/CoreUtils/tagged-unions.ts
rename to src/sharedHelpers/taggedUnions.ts
index abbe85734..ad9042377 100644
--- a/src/CoreUtils/tagged-unions.ts
+++ b/src/sharedHelpers/taggedUnions.ts
@@ -9,9 +9,9 @@ export type StringIndexed<A extends object> = A & { [key: string]: unknown }
 
 export type Tagged<A = string> = { tag: A }
 
-export interface MinimalReduxAction<A extends string> extends Action<A> {}
+export interface MinReduxAction<A extends string> extends Action<A> {}
 
-export interface MinimalTaggedType<A extends string> extends Tagged<A> {}
+export interface MinTaggedType<A extends string> extends Tagged<A> {}
 
 export type TagKeyOf<A extends object> = keyof A & string
 
@@ -32,8 +32,8 @@ export type TaggedUnionMember<
   Value extends DataConstructorTagValue<A, DataConstructorTagKey>
 > = TaggedType<A, DataConstructorTagKey, Value>
 
-export const MemberTag = 'MemberTag'
-export type MemberTag = typeof MemberTag
+export const __ = '__'
+export type __ = typeof __
 
 export type Constructors<
   A extends object,
@@ -60,7 +60,7 @@ export const mkConstructors = <A extends object>() => <
 >(
   tag: DataConstructorTagKey,
   memberTagRecord: {
-    [K in DataConstructorTagValue<A, DataConstructorTagKey>]: MemberTag
+    [K in DataConstructorTagValue<A, DataConstructorTagKey>]: __
   },
 ): Constructors<A, DataConstructorTagKey> => {
   const result = {} as StringIndexed<Constructors<A, DataConstructorTagKey>>
@@ -126,7 +126,7 @@ export type Guards<
     x: A,
   ) => x is TaggedUnionMember<A, DataConstructorTagKey, K>
 } & {
-  MemberOfUnion: (action: object) => action is A
+  memberOfUnion: (action: object) => action is A
 }
 
 export const mkGuards = <A extends object>() => <
@@ -134,7 +134,7 @@ export const mkGuards = <A extends object>() => <
 >(
   tag: DataConstructorTagKey,
   memberTagRecord: {
-    [K in DataConstructorTagValue<A, DataConstructorTagKey>]: MemberTag
+    [K in DataConstructorTagValue<A, DataConstructorTagKey>]: __
   },
 ): Guards<A, DataConstructorTagKey> => {
   type GuardFunction = (
@@ -150,7 +150,7 @@ export const mkGuards = <A extends object>() => <
   >
   const result = {} as StringIndexed<
     Guards<A, DataConstructorTagKey> & {
-      MemberOfUnion: (action: NonNullable<unknown>) => action is A
+      memberOfUnion: (action: NonNullable<unknown>) => action is A
     }
   >
   for (const memberTag of Object.keys(memberTagRecord)) {
@@ -171,7 +171,7 @@ export const mkGuards = <A extends object>() => <
 
   return {
     ...result,
-    MemberOfUnion: (
+    memberOfUnion: (
       action:
         | A
         | {
@@ -213,7 +213,7 @@ export type TaggedUnionExt<
 export const mkTaggedUnionCustom = <A extends object>() => <
   DataConstructorTagKey extends TagKeyOf<A>,
   MemberTagsRecord extends Exact<
-    { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: MemberTag },
+    { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: __ },
     MemberTagsRecord
   >
 >(
@@ -238,12 +238,7 @@ export interface MinimalTaggedUnionMember {
 export const mkTaggedUnion = <A extends MinimalTaggedUnionMember>() => <
   DataConstructorTagKey extends keyof A & 'tag',
   MemberTagsRecord extends Exact<
-    {
-      [K in DataConstructorTagValue<
-        A,
-        DataConstructorTagKey
-      >]: DataConstructorTagValue<A, DataConstructorTagKey>
-    },
+    { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: __ },
     MemberTagsRecord
   >
 >(
@@ -251,72 +246,15 @@ export const mkTaggedUnion = <A extends MinimalTaggedUnionMember>() => <
 ): TaggedUnionExt<DataConstructorTagKey, A> =>
   mkTaggedUnionCustom<A>()('tag' as DataConstructorTagKey, memberTagsRecord)
 
-export type ReduxActionsUnionExt<
-  DataConstructorTagKey extends TagKeyOf<A> & 'type',
-  A extends MinimalReduxAction<
-    DataConstructorTagValue<A, DataConstructorTagKey>
-  >
-> = Constructors<A, DataConstructorTagKey> & {
-  is: Guards<A, DataConstructorTagKey>
-} & {
-  fold: Fold<A, DataConstructorTagKey>
-} & {
-  tags: string[]
-} & {
-  reducer: Reducer<A, DataConstructorTagKey>
-}
-
-type Reducer<
-  A extends MinimalReduxAction<
-    DataConstructorTagValue<A, DataConstructorTagKey>
-  >,
-  DataConstructorTagKey extends TagKeyOf<A> & 'type'
-> = <S>(
-  init: S,
-) => (
-  updateLogic: (
-    s: S,
-  ) => {
-    [K in DataConstructorTagValue<A, DataConstructorTagKey>]: (
-      x: TaggedUnionMember<A, DataConstructorTagKey, K>,
-    ) => S
-  },
-) => (state: S | undefined, action: A) => S
-
-export const mkReducer = <
-  A extends MinimalReduxAction<
-    DataConstructorTagValue<A, DataConstructorTagKey>
-  >,
-  DataConstructorTagKey extends TagKeyOf<A> & 'type'
->(
-  reduxActionsUnionExt: TaggedUnionExt<DataConstructorTagKey, A>,
-): Reducer<A, DataConstructorTagKey> => init => updateLogic => (
-  state = init,
-  action,
-) =>
-  reduxActionsUnionExt.is.MemberOfUnion(action)
-    ? reduxActionsUnionExt.fold<typeof init>(updateLogic(state))(action)
-    : state
-
-export const mkReduxActionsUnion = <
-  A extends MinimalReduxAction<
-    DataConstructorTagValue<A, DataConstructorTagKey>
-  >,
+export const mkActionsUnion = <
+  A extends MinReduxAction<DataConstructorTagValue<A, DataConstructorTagKey>>,
   DataConstructorTagKey extends TagKeyOf<A> & 'type' = TagKeyOf<A> & 'type'
 >() => <
   MemberTagsRecord extends Exact<
-    { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: MemberTag },
+    { [K in DataConstructorTagValue<A, DataConstructorTagKey>]: __ },
     MemberTagsRecord
   >
 >(
   memberTagsRecord: MemberTagsRecord,
-): ReduxActionsUnionExt<DataConstructorTagKey, A> => {
-  const reduxActionsUnionExt = mkTaggedUnionCustom<A>()(
-    'type' as DataConstructorTagKey,
-    memberTagsRecord,
-  )
-
-  const reducer = mkReducer(reduxActionsUnionExt)
-
-  return { ...reduxActionsUnionExt, reducer }
-}
+): TaggedUnionExt<DataConstructorTagKey, A> =>
+  mkTaggedUnionCustom<A>()('type' as DataConstructorTagKey, memberTagsRecord)
diff --git a/src/CoreUtils/primitive-guards.ts b/src/sharedHelpers/typeGuards.ts
similarity index 51%
rename from src/CoreUtils/primitive-guards.ts
rename to src/sharedHelpers/typeGuards.ts
index a6fe1c19c..a27d58462 100644
--- a/src/CoreUtils/primitive-guards.ts
+++ b/src/sharedHelpers/typeGuards.ts
@@ -1,4 +1,4 @@
-import { Nil } from './type-level'
+import { Falsy, Nil } from './typeLevel'
 
 /**
  * Tests whether or not an argument is null (type guard)
@@ -28,17 +28,44 @@ export const isTrue = (x: unknown): x is true =>
   typeof x === 'boolean' && x === true
 
 /**
- * Type guard for the `` literal of the `string` primitive
+ * Type guard for the '' literal of the `string` primitive
  */
-export const isEmptyString = (x: unknown): x is '' =>
-  typeof x === 'string' && x === ''
+export const isEmptyString = (x: unknown): x is '' => isString(x) && x === ''
 
 /**
  * Type guard for the `0` literal of the `number` primitive
  */
-export const isZero = (x: unknown): x is 0 => typeof x === 'number' && x === 0
+export const isZero = (x: unknown): x is 0 => isNumber(x) && x === 0
+
+/**
+ * Type guard for the Falsy type
+ */
+// tslint:disable-next-line:no-any
+export const isFalsy = (x: any): x is Falsy =>
+  isNil(x) ||
+  isFalse(x) ||
+  isEmptyString(x) ||
+  isZero(x) ||
+  (isNumber(x) && Number.isNaN(x))
+
+/**
+ * Type guard for the `string` primitive
+ */
+export const isString = (x: unknown): x is string => typeof x === 'string'
 
 /**
  * Type guard for the `number` primitive
  */
 export const isNumber = (x: unknown): x is number => typeof x === 'number'
+
+/**
+ * Type guard for the `object` primitive
+ */
+export const isObject = (x: unknown): x is object =>
+  !isNull(x) && typeof x === 'object' && x instanceof Object
+
+/**
+ * Type guard for the `Function` primitive
+ */
+export const isFunction = (x: unknown): x is (params: unknown) => void =>
+  x instanceof Function
diff --git a/src/CoreUtils/type-level.ts b/src/sharedHelpers/typeLevel.ts
similarity index 86%
rename from src/CoreUtils/type-level.ts
rename to src/sharedHelpers/typeLevel.ts
index 9342215fe..6ffb10bf2 100644
--- a/src/CoreUtils/type-level.ts
+++ b/src/sharedHelpers/typeLevel.ts
@@ -1,13 +1,6 @@
 import { HKT, HKT2, HKT3, HKT4, URIS, URIS2, URIS3, URIS4 } from 'fp-ts/lib/HKT'
 import { Either } from 'fp-ts/lib/Either'
 import { Option } from 'fp-ts/lib/Option'
-import {
-  ClassAttributes,
-  Component,
-  ComponentState,
-  HTMLAttributes,
-} from 'react'
-import { ThemedOuterStyledProps } from 'styled-components'
 
 import { NaN } from './newtypes'
 
@@ -115,27 +108,6 @@ export type ExtractAFromEither<
   E extends Either<unknown, unknown>
 > = ExtractAFromHKT2<E>
 
-/**
- * Type utility for use with styled wrapper refs
- *
- * NOTE: This is somewhat of a hack... it's a workaround
- * for dealing with the difficulty of passing refs through
- * to components made by the `styled` function of
- * styled-components when extending an HTMLElement
- */
-export type StyledHtmlElement<
-  BaseType,
-  BaseTypeProps,
-  ThemeType = unknown
-> = BaseType &
-  Component<
-    ThemedOuterStyledProps<
-      BaseTypeProps & ClassAttributes<BaseType> & HTMLAttributes<BaseType>,
-      ThemeType
-    >,
-    ComponentState
-  >
-
 /**
  * Generic nullable type for unions with `null`
  */
@@ -183,3 +155,10 @@ export type IfIsNeverThenElse<A, Then, Else> = IfIsThenElse<
  * (All props must be defined & non-null)
  */
 export type RequireNonNilable<A> = { [P in keyof A]-?: NonNilable<A[P]> }
+
+/**
+ * Map over `Record` property values and unbox those of type `Option<A>` to type `A`
+ */
+export type UnboxRecordPropertyOptionValues<
+  R extends Record<PropertyKey, unknown>
+> = { [K in keyof R]: R[K] extends Option<infer A> ? A : R[K] }
diff --git a/src/sidebar/ContextMenu.tsx b/src/sidebar/ContextMenu.tsx
index ab4e3d70c..2a3c74cbd 100644
--- a/src/sidebar/ContextMenu.tsx
+++ b/src/sidebar/ContextMenu.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import { SidebarDropDown } from '@monorail/sidebar/SidebarDropDown'
 import { PopOverChildProps } from '@monorail/popOver/PopOver'
-import { Search, SearchRefType } from '@monorail/inputs/Search'
+import { Search } from '@monorail/inputs/Search'
 import {
   ListContainer,
   ListItemGraphic,
@@ -32,24 +32,28 @@ import { CommonComponentType } from '@monorail/types'
 import { SearchController } from '@monorail/inputs/SearchController'
 import { array, isEmpty } from 'fp-ts/lib/Array'
 import { some, none } from 'fp-ts/lib/Option'
-import { isEmptyString, isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 const SearchContainer = styled.div`
-  display: flex;
+  ${flexFlow('row')};
+
   align-items: center;
+  flex-shrink: 0;
 `
 
-const MenuHeader = styled<CommonComponentType, 'span'>('span')`
-  ${typography(500, FontSizes.Title5, '12px')};
-  ${ellipsis};
+const MenuHeader = styled.span<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${typography(500, FontSizes.Title5, '12px')};
+    ${ellipsis};
 
-  color: ${colors(Colors.Black62)};
-  flex-shrink: 0;
+    color: ${colors(Colors.Black62)};
+    flex-shrink: 0;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-const MenuItemIconRow = styled('div')`
+const MenuItemIconRow = styled.div`
   ${flexFlow('row')};
 
   flex: 1 1 100%;
@@ -159,7 +163,7 @@ export class ContextMenu extends Component<Props> {
     renderFilter: () => null,
   }
 
-  searchRef = createRef<SearchRefType>()
+  searchRef = createRef<HTMLInputElement>()
 
   componentDidUpdate(prevProps: Readonly<Props>) {
     const searchRef = this.searchRef.current
@@ -244,6 +248,7 @@ export class ContextMenu extends Component<Props> {
                     cssOverrides={css`
                       flex-grow: 1;
                       margin: 12px;
+                      flex-shrink: unset;
                     `}
                     searchRef={this.searchRef}
                   />
diff --git a/src/sidebar/SideBarComponents.tsx b/src/sidebar/SideBarComponents.tsx
index 1d86eea65..65af798b9 100644
--- a/src/sidebar/SideBarComponents.tsx
+++ b/src/sidebar/SideBarComponents.tsx
@@ -4,16 +4,16 @@ import {
   baseDisabledStyles,
   BorderRadius,
   borderRadius,
-  ease,
   Colors,
   colors,
+  ease,
   flexFlow,
   FontSizes,
   gothamFontFamily,
   Sizes,
+  transition,
   typography,
   visible,
-  transition,
 } from '@monorail/CommonStyles'
 import { CommonComponentType } from '@monorail/types'
 import { PopOverToggleProps } from '@monorail/popOver/PopOver'
@@ -24,6 +24,8 @@ import {
   ListItemSecondaryText,
   ListItemText,
 } from '@monorail/list/List'
+import posed from 'react-pose'
+import { zIndex, ZIndexNodeName } from '@monorail/commonStyles/zindex'
 
 export const sideBarCollapsedTransitionDuration = 150
 
@@ -39,18 +41,12 @@ export const sideBarCollapsedTransition: (
     duration: sideBarCollapsedTransitionDuration,
   })
 
-import posed from 'react-pose'
-
 export enum SidebarContainerAnimationPose {
   Open = 'open',
   Collapsed = 'collapsed',
 }
 
-export const SidebarContainer = styled<
-  CommonComponentType & {
-    pose: string
-  }
->(
+export const SidebarContainer = styled(
   posed.div({
     [SidebarContainerAnimationPose.Open]: {
       width: 224,
@@ -67,15 +63,19 @@ export const SidebarContainer = styled<
       },
     },
   }),
-)`
+)<
+  CommonComponentType & {
+    pose: string
+  }
+>`
   ${flexFlow()};
   ${gothamFontFamily};
+  ${zIndex(ZIndexNodeName.SidebarContainer)};
 
   background: #f4f4f7;
   box-sizing: border-box;
   flex-shrink: 0;
   position: relative;
-  z-index: 5;
 
   will-change: width;
 
@@ -96,26 +96,19 @@ export const SidebarContainer = styled<
   }
 `
 
-export const SidebarMenuContainer = styled<CommonComponentType, 'div'>('div')`
-  ${flexFlow()};
+export const SidebarMenuContainer = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
 
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 8px;
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 8px;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-export const SidebarMenuItemDropDownToggle = styled<
-  CommonComponentType &
-    PopOverToggleProps & {
-      disabled?: boolean
-      title: string
-      subtitle?: string
-      iconName: string
-      isSideBarCollapsed: boolean
-    }
->(
+export const SidebarMenuItemDropDownToggle = styled(
   ({
     title,
     subtitle,
@@ -170,17 +163,26 @@ export const SidebarMenuItemDropDownToggle = styled<
       />
     </ListItem>
   ),
-)`
-  ${({ isOpen, isSideBarCollapsed, cssOverrides, disabled }) => css`
-    ${disabled && baseDisabledStyles}
+)<
+  CommonComponentType &
+    PopOverToggleProps & {
+      disabled?: boolean
+      title: string
+      subtitle?: string
+      iconName: string
+      isSideBarCollapsed: boolean
+    }
+>(
+  ({ isOpen, isSideBarCollapsed, cssOverrides, disabled }) => css`
+    ${disabled && baseDisabledStyles};
 
     background: ${colors(Colors.White)};
     margin: 0 8px 8px;
     border: 1px solid
       ${isOpen ? colors(Colors.AccentPurple700) : colors(Colors.White)};
-    color: ${
-      isOpen ? colors(Colors.AccentPurple700) : colors(Colors.BrandDarkBlue)
-    };
+    color: ${isOpen
+      ? colors(Colors.AccentPurple700)
+      : colors(Colors.BrandDarkBlue)};
 
     &:hover,
     &:active {
@@ -197,7 +199,8 @@ export const SidebarMenuItemDropDownToggle = styled<
     }
 
     &:active,
-    &:active ${ListItemGraphic} { /* stylelint-disable-line selector-type-no-unknown */
+    &:active ${ListItemGraphic} {
+      /* stylelint-disable-line selector-type-no-unknown */
       color: ${colors(Colors.AccentPurple700)};
     }
 
@@ -207,18 +210,16 @@ export const SidebarMenuItemDropDownToggle = styled<
     }
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
 
-export const SidebarMenuContextRibbon = styled<CommonComponentType, 'div'>(
-  'div',
-)`
+export const SidebarMenuContextRibbon = styled.div<CommonComponentType>`
   ${typography(500, FontSizes.Title5, '12px 12px 13px 20px')};
 
   color: ${colors(Colors.Black62)};
 `
 
-export const SideBarMenuDivider = styled('div')`
+export const SideBarMenuDivider = styled.div`
   background: #e2e4ea;
   height: 1px;
   margin: 15px 8px 16px;
diff --git a/src/sidebar/SidebarDropDown.tsx b/src/sidebar/SidebarDropDown.tsx
index 4d308def0..b3218be2b 100644
--- a/src/sidebar/SidebarDropDown.tsx
+++ b/src/sidebar/SidebarDropDown.tsx
@@ -6,23 +6,18 @@ import { flexFlow, generateScaleAnimation } from '@monorail/CommonStyles'
 import { Overlay } from '@monorail/toggle/Overlay'
 
 import { fromNullable } from 'fp-ts/lib/Option'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
 
 type DropDownContentProps = { cssOverrides?: SimpleInterpolation }
-const DropDownContent = styled<DropDownContentProps, 'div'>('div')`
-  ${({ cssOverrides }) => css`
+
+const DropDownContent = styled.div<DropDownContentProps>(
+  ({ cssOverrides }) => css`
     ${flexFlow()};
 
     overflow: hidden;
 
     ${cssOverrides};
-  `};
-`
-
-type BBCardBackgroundRefType = StyledHtmlElement<
-  HTMLDivElement,
-  BBCardBackgroundProps
->
+  `,
+)
 
 type Props = PopOverChildProps & {
   width: number
@@ -41,7 +36,7 @@ export class SidebarDropDown extends Component<Props, State> {
     dropDownHeight: 0,
   }
 
-  dropDownRef = createRef<BBCardBackgroundRefType>()
+  dropDownRef = createRef<HTMLDivElement>()
 
   componentDidMount() {
     this.updateMenuHeight()
diff --git a/src/status/Status.tsx b/src/status/Status.tsx
index 33bfb58b2..2b9531b0f 100644
--- a/src/status/Status.tsx
+++ b/src/status/Status.tsx
@@ -9,8 +9,8 @@ type Props = CommonComponentType & {
   inactive?: boolean
 }
 
-export const Status = styled<Props, 'div'>('div')`
-  ${({ cssOverrides, size = 16, inactive = false }) => css`
+export const Status = styled.div<Props>(
+  ({ cssOverrides, size = 16, inactive = false }) => css`
     background: ${colors(Colors.BrandLightBlue)};
     background: ${colors(inactive ? Colors.Black54 : Colors.BrandLightBlue)};
     border-radius: ${size / 2}px;
@@ -26,5 +26,5 @@ export const Status = styled<Props, 'div'>('div')`
     display: inline-block;
 
     ${cssOverrides};
-  `};
-`
+  `,
+)
diff --git a/src/stepper/HorizontalStepper.tsx b/src/stepper/HorizontalStepper.tsx
index 43aa3b14c..c715f604b 100644
--- a/src/stepper/HorizontalStepper.tsx
+++ b/src/stepper/HorizontalStepper.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import styled, { SimpleInterpolation } from 'styled-components'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
+import styled, { css, SimpleInterpolation } from 'styled-components'
 
 import { Icon } from '@monorail/icon/Icon'
 
@@ -16,16 +16,16 @@ type Props = {
   onStepClick: (step: StepType, index: number) => void
 }
 
-const HorizontalStepperContainer = styled<StyleOptions, 'div'>('div')`
-  display: flex;
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-
-  ${({ cssOverrides }) => cssOverrides};
-`
+const HorizontalStepperContainer = styled.div<StyleOptions>(
+  ({ cssOverrides }) => css`
+    display: flex;
+    height: 100%;
+    width: 100%;
+    justify-content: center;
+  `,
+)
 
-const Step = styled<StyleOptions, 'div'>('div')`
+const Step = styled.div<StyleOptions>`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -66,7 +66,7 @@ const Step = styled<StyleOptions, 'div'>('div')`
     }
   }
 `
-const Body = styled('div')`
+const Body = styled.div`
   align-items: center;
   display: flex;
   z-index: 1;
@@ -74,75 +74,85 @@ const Body = styled('div')`
   overflow: hidden;
 `
 
-const NumberWrapper = styled<StyleOptions, 'div'>('div')`
-  padding: 10px;
-  position: relative;
-  background-color: ${props =>
-    props.darkMode ? 'hsla(234,56%,20%,1)' : 'white'};
+const NumberWrapper = styled.div<StyleOptions>(
+  ({ darkMode }) => css`
+    padding: 10px;
+    position: relative;
+    background-color: ${darkMode ? 'hsla(234,56%,20%,1)' : 'white'};
 
-  .icon {
-    position: absolute;
-    left: 5px;
-    top: 5px;
+    .icon {
+      position: absolute;
+      left: 5px;
+      top: 5px;
 
-    svg {
-      fill: #1465ff;
+      svg {
+        fill: #1465ff;
+      }
     }
-  }
-`
-
-const Number = styled<StyleOptions, 'div'>('div')`
-  border-style: solid;
-  border-width: 2px;
-  border-color: ${props => (props.darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)')};
-  align-items: center;
-  border-radius: 50%;
-  width: 25px;
-  height: 25px;
-  position: relative;
-`
+  `,
+)
+
+const Number = styled.div<StyleOptions>(
+  ({ darkMode }) => css`
+    border-style: solid;
+    border-width: 2px;
+    border-color: ${darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)'};
+    align-items: center;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    position: relative;
+  `,
+)
 
 // Needed to have this because otherwise
 // the number would bounce around when
 // swapping between checkmark and digit
-const Digit = styled<StyleOptions, 'div'>('div')`
-  color: ${props => (props.darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)')};
-  font-weight: bold;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  display: flex;
-`
-
-const Text = styled<StyleOptions, 'div'>('div')`
-  display: flex;
-  flex-direction: column;
-  background-color: ${props =>
-    props.darkMode ? 'hsla(234,56%,20%,1)' : 'white'};
-  padding-right: 10px;
-`
-
-const Title = styled<StyleOptions, 'div'>('div')`
-  color: ${props => (props.darkMode ? 'white' : 'black')};
-  font-size: 13px;
-  font-weight: bold;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const Subtitle = styled<StyleOptions, 'div'>('div')`
-  color: ${props => (props.darkMode ? 'white' : 'black')};
-  font-size: 11px;
-  opacity: 0.7;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
+const Digit = styled.div<StyleOptions>(
+  ({ darkMode }) => css`
+    color: ${darkMode ? 'white' : 'rgba(0, 0, 0, 0.54)'};
+    font-weight: bold;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    display: flex;
+  `,
+)
+
+const Text = styled.div<StyleOptions>(
+  ({ darkMode }) => css`
+    display: flex;
+    flex-direction: column;
+    background-color: ${darkMode ? 'hsla(234,56%,20%,1)' : 'white'};
+    padding-right: 10px;
+  `,
+)
+
+const Title = styled.div<StyleOptions>(
+  ({ darkMode }) => css`
+    color: ${darkMode ? 'white' : 'black'};
+    font-size: 13px;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+)
+
+const Subtitle = styled.div<StyleOptions>(
+  ({ darkMode }) => css`
+    color: ${darkMode ? 'white' : 'black'};
+    font-size: 11px;
+    opacity: 0.7;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+)
 
-const Line = styled('div')`
+const Line = styled.div`
   height: 1px;
   width: 50%;
   background-color: #c4c4c4;
diff --git a/src/tabs/Tab.tsx b/src/tabs/Tab.tsx
index 6348adcb5..396101688 100644
--- a/src/tabs/Tab.tsx
+++ b/src/tabs/Tab.tsx
@@ -12,39 +12,40 @@ import {
 
 import { LinkProps } from '@monorail/list/List'
 import { CommonComponentType } from '@monorail/types'
-import styled from 'styled-components'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
-import { StyledHtmlElement } from '@monorail/CoreUtils/type-level'
-
-const CCTab = styled<CCTabProps, 'div'>('div')`
-  ${flexFlow('row')};
-  ${typography(700, FontSizes.Title5)};
-
-  align-items: center;
-  color: ${colors(Colors.BrandLightBlue)};
-  cursor: pointer;
-  min-height: 24px;
-  padding: 0 8px;
-  text-transform: uppercase;
-  user-select: none;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
+import styled, { css } from 'styled-components'
+
+const CCTab = styled.div<CCTabProps>(
+  ({ cssOverrides }) => css`
+    ${flexFlow('row')};
+    ${typography(700, FontSizes.Title5)};
+
+    align-items: center;
+    color: ${colors(Colors.BrandLightBlue)};
+    cursor: pointer;
+    min-height: 24px;
+    padding: 0 8px;
+    text-transform: uppercase;
+    user-select: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
 
-  &:hover {
-    background: ${colors(Colors.BrandLightBlue, 0.08)};
-  }
+    &:hover {
+      background: ${colors(Colors.BrandLightBlue, 0.08)};
+    }
 
-  &:active {
-    background: ${colors(Colors.BrandLightBlue, 0.16)};
-  }
+    &:active {
+      background: ${colors(Colors.BrandLightBlue, 0.16)};
+    }
 
-  ${baseFocusStyles()};
+    ${baseFocusStyles()};
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 type CCTabProps = CommonComponentType &
   LinkProps & {
@@ -58,8 +59,6 @@ export type TabProps = CCTabProps & {
   updateIsActive: (i: number) => void
 }
 
-type TabRefType = StyledHtmlElement<HTMLDivElement, CCTabProps>
-
 export class Tab extends Component<TabProps> {
   static defaultProps = {
     isActive: false,
@@ -67,7 +66,7 @@ export class Tab extends Component<TabProps> {
     updateIsActive: () => {},
   }
 
-  tabRef = createRef<TabRefType>()
+  tabRef = createRef<HTMLDivElement>()
 
   componentDidMount() {
     this.callSetIndicator()
diff --git a/src/tabs/TabBar.tsx b/src/tabs/TabBar.tsx
index 5d4b8f0e8..853a8b76e 100644
--- a/src/tabs/TabBar.tsx
+++ b/src/tabs/TabBar.tsx
@@ -1,38 +1,39 @@
 import React, { Component, ReactNode } from 'react'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 import styled, { css, SimpleInterpolation } from 'styled-components'
 import { Colors, colors, flexFlow, Sizes } from '@monorail/CommonStyles'
 import { TabProps } from './Tab'
 
 // TabBarIndicator is pos:abs to this element. Also we use offsetLeft on the Tab which references this position.
-export const TabBarContainer = styled<CCTabBarProps, 'div'>('div')`
-  ${flexFlow('row')};
-
-  height: ${({ size }) => size}px;
-  padding: 0 8px;
-  position: relative;
-  box-sizing: border-box;
-  border-bottom: 1px solid ${colors(Colors.Grey94)};
-  flex-shrink: 0;
-
-  ${({ cssOverrides }) => cssOverrides};
-`
-
-const TabBarIndicator = styled<TabBarIndicatorProps, 'div'>('div')`
-  ${({ left, width, duration }) => css`
+export const TabBarContainer = styled.div<CCTabBarProps>(
+  ({ cssOverrides, size }) => css`
+    ${flexFlow('row')};
+
+    height: ${size}px;
+    padding: 0 8px;
+    position: relative;
+    box-sizing: border-box;
+    border-bottom: 1px solid ${colors(Colors.Grey94)};
+    flex-shrink: 0;
+
+    ${cssOverrides};
+  `,
+)
+
+const TabBarIndicator = styled.div<TabBarIndicatorProps>(
+  ({ left, width, duration }) => css`
+    background: ${colors(Colors.BrandLightBlue)};
+    border-radius: 3px 3px 0 0;
+    bottom: 0;
+    height: 3px;
     left: ${left}px;
-    width: ${width}px;
+    position: absolute;
     transition-duration: ${duration * 1.4}ms;
-  `};
-
-  background: ${colors(Colors.BrandLightBlue)};
-  border-radius: 3px 3px 0 0;
-  bottom: 0;
-  height: 3px;
-  position: absolute;
-  transition-property: all;
-  transition-timing-function: ease-in-out;
-`
+    transition-property: all;
+    transition-timing-function: ease-in-out;
+    width: ${width}px;
+  `,
+)
 
 const TabBarActions = styled.div`
   ${flexFlow('row')};
diff --git a/src/tags/Tag.tsx b/src/tags/Tag.tsx
index 1a8592245..06492b306 100644
--- a/src/tags/Tag.tsx
+++ b/src/tags/Tag.tsx
@@ -9,7 +9,7 @@ import {
   FontSizes,
   typography,
 } from '@monorail/CommonStyles'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 
 const tagHeight = 24
 const circleWidth = tagHeight - 4
@@ -21,36 +21,37 @@ type CCTagProps = {
   label?: string
 }
 
-export const CCTag = styled<CCTagProps, 'div'>('div')`
-  ${({ label }) =>
-    isNil(label) &&
-    css`
-      width: ${tagHeight}px;
-    `};
+export const CCTag = styled.div<CCTagProps>(
+  ({ label, cssOverrides }) => css`
+    ${isNil(label) &&
+      css`
+        width: ${tagHeight}px;
+      `};
 
-  ${flexFlow('row')};
-  display: inline-flex;
-  align-items: center;
-  background: ${colors(Colors.Black, 0.07)};
-  border-radius: ${tagHeight / 2}px;
-  height: ${tagHeight}px;
-  position: relative; /* ::before circle is pos: abs to this element. */
-  text-transform: uppercase;
-  user-select: none;
+    ${flexFlow('row')};
+    display: inline-flex;
+    align-items: center;
+    background: ${colors(Colors.Black, 0.07)};
+    border-radius: ${tagHeight / 2}px;
+    height: ${tagHeight}px;
+    position: relative; /* ::before circle is pos: abs to this element. */
+    text-transform: uppercase;
+    user-select: none;
 
-  &::before {
-    background: ${colors(Colors.White)};
-    border-radius: ${circleRadius}px;
-    bottom: 2px;
-    content: '';
-    left: 2px;
-    position: absolute;
-    top: 2px;
-    width: ${circleWidth}px;
-  }
+    &::before {
+      background: ${colors(Colors.White)};
+      border-radius: ${circleRadius}px;
+      bottom: 2px;
+      content: '';
+      left: 2px;
+      position: absolute;
+      top: 2px;
+      width: ${circleWidth}px;
+    }
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 const StyledIconLeft = styled(Icon)`
   color: ${colors(Colors.BrandLightBlue)};
@@ -58,7 +59,7 @@ const StyledIconLeft = styled(Icon)`
   position: relative; /* give z-index so ::before bg is behind icon */
 `
 
-const Title = styled('h1')`
+const Title = styled.h1`
   ${typography(700, FontSizes.Content)};
   color: ${colors(Colors.Black89)};
   margin: 0 10px 0 2px;
diff --git a/src/tile/Tile.tsx b/src/tile/Tile.tsx
index 7d4f224d1..503decb09 100644
--- a/src/tile/Tile.tsx
+++ b/src/tile/Tile.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { CommonComponentType } from '@monorail/types'
 import {
   BorderRadius,
@@ -8,18 +8,19 @@ import {
   flexFlow,
 } from '@monorail/CommonStyles'
 
-export const Tile = styled<
-  CommonComponentType & { direction?: 'row' | 'column' },
-  'div'
->('div')`
-  ${({ direction = 'column' }) => flexFlow(direction)};
-  ${borderRadius(BorderRadius.Medium)};
+export const Tile = styled.div<
+  CommonComponentType & { direction?: 'row' | 'column' }
+>(
+  ({ direction = 'column', cssOverrides }) => css`
+    ${flexFlow(direction)};
+    ${borderRadius(BorderRadius.Medium)};
 
-  background: ${colors(Colors.White)};
-  border: 1px solid ${colors(Colors.Grey96)};
-  box-sizing: border-box;
-  flex-shrink: 0;
-  justify-content: space-between;
+    background: ${colors(Colors.White)};
+    border: 1px solid ${colors(Colors.Grey96)};
+    box-sizing: border-box;
+    flex-shrink: 0;
+    justify-content: space-between;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
diff --git a/src/toggle/Overlay.tsx b/src/toggle/Overlay.tsx
index 30d688f18..9286103cb 100644
--- a/src/toggle/Overlay.tsx
+++ b/src/toggle/Overlay.tsx
@@ -11,12 +11,14 @@ type Props = Omit<PopOverChildProps, 'position'> & {
   overlayProps?: Omit<BBModalOverlayProps, 'isOpen' | 'onClick'>
   escToClose: boolean
   usesScaleAnimation: boolean
+  zIndex: number
 }
 
 export class Overlay extends Component<Props> {
   static defaultProps = {
     usesScaleAnimation: false,
     escToClose: true,
+    zIndex: 9998,
   }
 
   componentDidMount() {
@@ -47,11 +49,12 @@ export class Overlay extends Component<Props> {
 
   render() {
     const {
+      children,
       isOpen,
       onClick,
-      children,
       overlayProps,
       usesScaleAnimation,
+      zIndex,
     } = this.props
 
     return (
@@ -59,6 +62,7 @@ export class Overlay extends Component<Props> {
         onClick={e => e.stopPropagation()}
         usesScaleAnimation={usesScaleAnimation}
         isOpen={isOpen}
+        zIndex={zIndex}
       >
         <BBModalOverlay isOpen={isOpen} onClick={onClick} {...overlayProps} />
 
diff --git a/src/toggle/Toggle.tsx b/src/toggle/Toggle.tsx
index c86cb9e1d..6e7cef5ab 100644
--- a/src/toggle/Toggle.tsx
+++ b/src/toggle/Toggle.tsx
@@ -75,19 +75,19 @@ const iconSizeCss = {
   `,
 }
 
-const CCToggle = styled<ToggleProps, 'label'>('label')`
-  ${({ toggleSize }) => toggleSizeCss[toggleSize]};
+const CCToggle = styled.label<ToggleProps>(
+  ({ toggleSize, checked, cssOverrides }) => css`
+    ${toggleSizeCss[toggleSize]};
 
-  box-sizing: content-box;
-  cursor: pointer;
-  display: inline-block;
-  position: relative; /* Slider is pos:abs to this element */
+    box-sizing: content-box;
+    cursor: pointer;
+    display: inline-block;
+    position: relative; /* Slider is pos:abs to this element */
 
-  transition: all ease-in 150ms;
+    transition: all ease-in 150ms;
 
-  /* Change Slider BG/Border Color */
-  ${({ checked }) =>
-    checked
+    /* Change Slider BG/Border Color */
+    ${checked
       ? css`
           background-color: ${colors(Colors.BrandLightBlue)};
           border-color: ${colors(Colors.BrandLightBlue)};
@@ -97,66 +97,75 @@ const CCToggle = styled<ToggleProps, 'label'>('label')`
           border-color: ${colors(Colors.Black, 0.06)};
         `};
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-const StyledIconChecked = styled<{ checked: boolean } & SliderIconProps>(
-  ({ checked, toggleSize, ...otherProps }) => <Icon {...otherProps} />,
-)`
-  ${({ toggleSize }) => iconSizeCss[toggleSize]};
-  ${({ checked }) => visible(checked)};
+const StyledIconChecked = styled(({ checked, toggleSize, ...otherProps }) => (
+  <Icon {...otherProps} />
+))<{ checked: boolean } & SliderIconProps>(
+  ({ toggleSize, checked }: { checked: boolean } & SliderIconProps) => css`
+    ${iconSizeCss[toggleSize]};
+    ${visible(checked)};
 
-  color: ${colors(Colors.BrandLightBlue)};
-  position: absolute; /* give z-index so ::before bg is behind icon */
+    color: ${colors(Colors.BrandLightBlue)};
+    position: absolute; /* give z-index so ::before bg is behind icon */
 
-  transition: all ease-in 75ms;
-`
+    transition: all ease-in 75ms;
+  `,
+)
 
-const StyledIconNotChecked = styled<{ checked: boolean } & SliderIconProps>(
+const StyledIconNotChecked = styled(
   ({ checked, toggleSize, ...otherProps }) => <Icon {...otherProps} />,
-)`
-  ${({ toggleSize }) => iconSizeCss[toggleSize]};
-
-  ${({ checked }) => visible(!checked)};
-
-  color: ${colors(Colors.Black24)};
-  position: absolute; /* give z-index so ::before bg is behind icon */
-
-  transition: all ease-in 75ms;
-`
-
-export const Slider = styled<Slider, 'div'>('div')`
-  ${({ toggleSize }) => sliderSizeCss[toggleSize]};
-  ${getElevation(ElevationRange.Elevation1)};
-  ${flexFlow('row')};
+)<{ checked: boolean } & SliderIconProps>(
+  ({ checked, toggleSize }: { checked: boolean } & SliderIconProps) => css`
+    ${iconSizeCss[toggleSize]};
 
-  background-color: ${colors(Colors.White)};
-  border-radius: 50%;
-  bottom: 0;
-  content: '';
-  left: 0;
-  justify-content: center;
-  align-items: center;
+    ${visible(!checked)};
 
-  transition: all ease-in 75ms;
-`
+    color: ${colors(Colors.Black24)};
+    position: absolute; /* give z-index so ::before bg is behind icon */
 
-const Input = styled<Input, 'input'>('input')`
-  display: none; /* Hide default HTML checkbox */
-
-  /* Move Slider Circle */
-  &:checked + ${/* sc-selector */ Slider} {
-    ${({ toggleSize }) => inputSizeCss[toggleSize]};
-  }
-
-  /* Change Icon: 'check' | Change Color: Blue */
-  &:checked
-    + ${/* sc-selector */ Slider}
-    > ${/* sc-selector */ StyledIconChecked} {
-    ${visible(false)};
-    color: ${colors(Colors.BrandLightBlue)};
-  }
-`
+    transition: all ease-in 75ms;
+  `,
+)
+
+export const Slider = styled.div<Slider>(
+  ({ toggleSize }) => css`
+    ${sliderSizeCss[toggleSize]};
+    ${getElevation(ElevationRange.Elevation1)};
+    ${flexFlow('row')};
+
+    background-color: ${colors(Colors.White)};
+    border-radius: 50%;
+    bottom: 0;
+    content: '';
+    left: 0;
+    justify-content: center;
+    align-items: center;
+
+    transition: all ease-in 75ms;
+  `,
+)
+
+const Input = styled.input<InputProps>(
+  ({ toggleSize }) => css`
+    display: none; /* Hide default HTML checkbox */
+
+    /* Move Slider Circle */
+    &:checked + ${/* sc-selector */ Slider} {
+      ${inputSizeCss[toggleSize]};
+    }
+
+    /* Change Icon: 'check' | Change Color: Blue */
+    &:checked
+      + ${/* sc-selector */ Slider}
+      > ${/* sc-selector */ StyledIconChecked} {
+      ${visible(false)};
+      color: ${colors(Colors.BrandLightBlue)};
+    }
+  `,
+)
 
 type Slider = {
   toggleSize: ToggleSize
@@ -169,7 +178,7 @@ type ToggleProps = {
   onChange?: (checked: boolean) => void
 }
 
-type Input = {
+type InputProps = {
   toggleSize: ToggleSize
 }
 
diff --git a/src/typography/Details.tsx b/src/typography/Details.tsx
index bdef31329..32994837e 100644
--- a/src/typography/Details.tsx
+++ b/src/typography/Details.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { isNil } from '@monorail/CoreUtils/primitive-guards'
+import { isNil } from '@monorail/sharedHelpers/typeGuards'
 import styled, { css, SimpleInterpolation } from 'styled-components'
 import {
   Colors,
@@ -25,25 +25,26 @@ const largePropertyStyles = css`
   color: ${colors(Colors.Black74)};
 `
 
-const BBDetailsProperty = styled<BBDetailsSize, 'h2'>('h2')`
-  ${({ compact, large }) => {
-    if (compact) {
-      return compactPropertyStyles
-    } else if (large) {
-      return largePropertyStyles
-    } else {
-      return primaryPropertyStyles
-    }
-  }};
-
-  ${({ darkMode }) =>
-    darkMode &&
-    css`
-      color: ${colors(Colors.White)};
-    `};
-
-  margin: 0;
-`
+const BBDetailsProperty = styled.h2<BBDetailsSize>(
+  ({ compact, large, darkMode }) => css`
+    ${() => {
+      if (compact) {
+        return compactPropertyStyles
+      } else if (large) {
+        return largePropertyStyles
+      } else {
+        return primaryPropertyStyles
+      }
+    }};
+
+    ${darkMode &&
+      css`
+        color: ${colors(Colors.White)};
+      `};
+
+    margin: 0;
+  `,
+)
 
 // Value Styles
 const primaryValueStyles = css`
@@ -59,34 +60,37 @@ const largeValueStyles = css`
   color: ${colors(Colors.Black89)};
 `
 
-const BBDetailsValue = styled<BBDetailsSize, 'h2'>('h2')`
-  ${({ compact, large }) => {
-    if (compact) {
-      return compactValueStyles
-    } else if (large) {
-      return largeValueStyles
-    } else {
-      return primaryValueStyles
+const BBDetailsValue = styled.h2<BBDetailsSize>(
+  ({ compact, large, darkMode }) => css`
+    ${() => {
+      if (compact) {
+        return compactValueStyles
+      } else if (large) {
+        return largeValueStyles
+      } else {
+        return primaryValueStyles
+      }
+    }};
+    ${darkMode &&
+      css`
+        color: ${colors(Colors.White)};
+      `};
+
+    margin: 0;
+  `,
+)
+
+const BBDetailsContainer = styled.div<BBDetailsContainerProps>(
+  ({ cssOverrides }) => css`
+    ${flexFlow()};
+
+    ${CCTag} {
+      margin-top: 6px;
     }
-  }};
-  ${({ darkMode }) =>
-    darkMode &&
-    css`
-      color: ${colors(Colors.White)};
-    `};
-
-  margin: 0;
-`
 
-const BBDetailsContainer = styled<BBDetailsContainerProps, 'div'>('div')`
-  ${flexFlow()};
-
-  ${CCTag} {
-    margin-top: 6px;
-  }
-
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
 type BBDetailsSize = {
   compact?: boolean
diff --git a/src/typography/SectionHeader.tsx b/src/typography/SectionHeader.tsx
index 95cbdc766..8c41472d4 100644
--- a/src/typography/SectionHeader.tsx
+++ b/src/typography/SectionHeader.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import styled, { css, SimpleInterpolation } from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import { Icon } from '@monorail/icon/Icon'
 import { AppIcon } from '@monorail/appIcon/AppIcon'
@@ -10,24 +10,24 @@ import {
   flexFlow,
   FontSizes,
   typography,
+  isAppName,
 } from '@monorail/CommonStyles'
+import { CommonComponentType } from '@monorail/types'
 
-type CCSectionHeaderProps = {
-  cssOverrides?: SimpleInterpolation
-}
-
-const CCSectionHeader = styled<CCSectionHeaderProps, 'div'>('div')`
-  ${flexFlow('row')} align-items: center;
-  flex-shrink: 0;
-  height: 40px;
-  padding: 0 16px;
-   ${typography(700, FontSizes.Title5)}
-  color: ${colors(Colors.Black74)};
+const CCSectionHeader = styled.div<CommonComponentType>(
+  ({ cssOverrides }) => css`
+    ${flexFlow('row')};
+    ${typography(700, FontSizes.Title5)} align-items: center;
+    color: ${colors(Colors.Black74)};
+    flex-shrink: 0;
+    height: 40px;
+    padding: 0 16px;
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
 
-const Title = styled('h1')`
+const Title = styled.h1`
   ${typography(700, FontSizes.Title5)}
   color: ${colors(Colors.Black74)};
   flex: 1;
@@ -49,18 +49,12 @@ const StyledIconRight = styled(Icon)`
   ${iconRightStyle};
 `
 
-type SectionHeaderProps = CCSectionHeaderProps & {
+type SectionHeaderProps = CommonComponentType & {
   iconLeft?: string | AppName
   iconRight?: string | AppName
   title: string
 }
 
-type IconPropType = string | AppName
-
-function isAppName(iconName: IconPropType): iconName is AppName {
-  return Object.values(AppName).includes(iconName)
-}
-
 export class SectionHeader extends Component<SectionHeaderProps> {
   render() {
     const { title, iconLeft, iconRight, cssOverrides, children } = this.props
diff --git a/src/typography/Typography.ts b/src/typography/Typography.ts
index ac323a467..5050a81f6 100644
--- a/src/typography/Typography.ts
+++ b/src/typography/Typography.ts
@@ -1,12 +1,13 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { typography, FontSizes } from '@monorail/CommonStyles'
 import { CommonComponentType, TypographyComponent } from '@monorail/types'
 
-export const SectionTitle = styled<
-  CommonComponentType & TypographyComponent,
-  'h1'
->('h1')`
-  ${({ margin = '16px' }) => typography(500, FontSizes.Title3, margin)};
+export const SectionTitle = styled.h1<
+  CommonComponentType & TypographyComponent
+>(
+  ({ margin = '16px', cssOverrides }) => css`
+    ${typography(500, FontSizes.Title3, margin)};
 
-  ${({ cssOverrides }) => cssOverrides};
-`
+    ${cssOverrides};
+  `,
+)
diff --git a/yarn.lock b/yarn.lock
index f937207b9..604480823 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@babel/cli@7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.1.2.tgz#fc2853ae96824b3779ca85de4fd025ce3cf62a5e"
-  integrity sha512-K3WDlpBPGpoW11SLKFEBhMsITomPovsrZ/wnM3y+WStbytukDXC0OBic3yQp+j058QUw0+R/jfx2obwp1fOzcA==
+"@babel/cli@7.2.3":
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.2.3.tgz#1b262e42a3e959d28ab3d205ba2718e1923cfee6"
+  integrity sha512-bfna97nmJV6nDJhXNPeEfxyMjWnt6+IjUAaDPiYRTBlm8L41n8nvw6UAqUCbvpFfU246gHPxW7sfWwqtF4FcYA==
   dependencies:
     commander "^2.8.1"
     convert-source-map "^1.1.0"
@@ -26,27 +26,27 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/core@7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.2.tgz#f8d2a9ceb6832887329a7b60f9d035791400ba4e"
-  integrity sha512-IFeSSnjXdhDaoysIlev//UzHZbdEmm7D0EIH2qtse9xK7mXEZQpYjs2P00XlP1qYsYvid79p+Zgg6tz1mp6iVw==
+"@babel/core@7.3.4":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.3.4.tgz#921a5a13746c21e32445bf0798680e9d11a6530b"
+  integrity sha512-jRsuseXBo9pN197KnDwhhaaBzyZr2oIcLHHTt2oDdQrej5Qp57dCCJafWx5ivU8/alEYDpssYqv1MUqcxwQlrA==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.1.2"
-    "@babel/helpers" "^7.1.2"
-    "@babel/parser" "^7.1.2"
-    "@babel/template" "^7.1.2"
-    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.1.2"
+    "@babel/generator" "^7.3.4"
+    "@babel/helpers" "^7.2.0"
+    "@babel/parser" "^7.3.4"
+    "@babel/template" "^7.2.2"
+    "@babel/traverse" "^7.3.4"
+    "@babel/types" "^7.3.4"
     convert-source-map "^1.1.0"
-    debug "^3.1.0"
-    json5 "^0.5.0"
-    lodash "^4.17.10"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.11"
     resolve "^1.3.2"
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.1.2", "@babel/generator@^7.3.4":
+"@babel/generator@^7.3.4":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.3.4.tgz#9aa48c1989257877a9d971296e5b73bfe72e446e"
   integrity sha512-8EXhHRFqlVVWXPezBW5keTiQi/rJMQTg/Y9uVCEZ0CAF3PKtCCaVRnp64Ii1ujhkoDhhF1fVsImoN4yJ2uz4Wg==
@@ -57,6 +57,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.0.tgz#c230e79589ae7a729fd4631b9ded4dc220418196"
+  integrity sha512-/v5I+a1jhGSKLgZDcmAUZ4K/VePi43eRkUs3yePW1HB1iANOD5tqJXwGSG4BZhSksP8J9ejSlwGeTiiOFZOrXQ==
+  dependencies:
+    "@babel/types" "^7.4.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -80,23 +91,35 @@
     "@babel/types" "^7.3.0"
     esutils "^2.0.0"
 
-"@babel/helper-call-delegate@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.1.0.tgz#6a957f105f37755e8645343d3038a22e1449cc4a"
-  integrity sha512-YEtYZrw3GUK6emQHKthltKNZwszBcHK58Ygcis+gVUrF4/FmTVr5CCqQNSfmvg2y+YDEANyYoaLz/SHsnusCwQ==
+"@babel/helper-call-delegate@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.4.0.tgz#f308eabe0d44f451217853aedf4dea5f6fe3294f"
+  integrity sha512-SdqDfbVdNQCBp3WhK2mNdDvHd3BD6qbmIc43CAyjnsfCmgHMeqgDcM3BzY2lchi7HBJGJ2CVdynLWbezaE4mmQ==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.0.0"
-    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/helper-hoist-variables" "^7.4.0"
+    "@babel/traverse" "^7.4.0"
+    "@babel/types" "^7.4.0"
 
-"@babel/helper-define-map@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.1.0.tgz#3b74caec329b3c80c116290887c0dd9ae468c20c"
-  integrity sha512-yPPcW8dc3gZLN+U1mhYV91QU3n5uTbx7DUdf8NnPbjS0RMwBuHi9Xt2MUgppmNz7CJxTBWsGczTiEp1CSOTPRg==
+"@babel/helper-create-class-features-plugin@^7.3.0", "@babel/helper-create-class-features-plugin@^7.3.4":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.0.tgz#30fd090e059d021995c1762a5b76798fa0b51d82"
+  integrity sha512-2K8NohdOT7P6Vyp23QH4w2IleP8yG3UJsbRKwA4YP6H8fErcLkFuuEEqbF2/BYBKSNci/FWJiqm6R3VhM/QHgw==
   dependencies:
     "@babel/helper-function-name" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    lodash "^4.17.10"
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.4.0"
+    "@babel/helper-split-export-declaration" "^7.4.0"
+
+"@babel/helper-define-map@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.4.0.tgz#cbfd8c1b2f12708e262c26f600cd16ed6a3bc6c9"
+  integrity sha512-wAhQ9HdnLIywERVcSvX40CEJwKdAa1ID4neI9NXQPDOHwwA+57DqwLiPEVy2AIyWzAk0CQ8qx4awO0VUURwLtA==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/types" "^7.4.0"
+    lodash "^4.17.11"
 
 "@babel/helper-explode-assignable-expression@^7.1.0":
   version "7.1.0"
@@ -122,12 +145,12 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-hoist-variables@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0.tgz#46adc4c5e758645ae7a45deb92bab0918c23bb88"
-  integrity sha512-Ggv5sldXUeSKsuzLkddtyhyHe2YantsxWKNi7A+7LeD12ExRDWTRk29JCXpaHPAbMaIPZSil7n+lq78WY2VY7w==
+"@babel/helper-hoist-variables@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.0.tgz#25b621399ae229869329730a62015bbeb0a6fbd6"
+  integrity sha512-/NErCuoe/et17IlAQFKWM24qtyYYie7sFIrW/tIQXpck6vAu2hhtYYsKLBWQV+BQZMbcIYPU/QMYuTufrY4aQw==
   dependencies:
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.4.0"
 
 "@babel/helper-member-expression-to-functions@^7.0.0":
   version "7.0.0"
@@ -185,7 +208,7 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.3.4":
+"@babel/helper-replace-supers@^7.1.0":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.3.4.tgz#a795208e9b911a6eeb08e5891faacf06e7013e13"
   integrity sha512-pvObL9WVf2ADs+ePg0jrqlhHoxRXlOa+SHRHzAXIz2xkYuOHfGl+fKxPMaS4Fq+uje8JQPobnertBBvyrWnQ1A==
@@ -195,6 +218,16 @@
     "@babel/traverse" "^7.3.4"
     "@babel/types" "^7.3.4"
 
+"@babel/helper-replace-supers@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.4.0.tgz#4f56adb6aedcd449d2da9399c2dcf0545463b64c"
+  integrity sha512-PVwCVnWWAgnal+kJ+ZSAphzyl58XrFeSKSAJRiqg5QToTsjL+Xu1f9+RJ+d+Q0aPhPfBGaYfkox66k86thxNSg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/traverse" "^7.4.0"
+    "@babel/types" "^7.4.0"
+
 "@babel/helper-simple-access@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
@@ -210,6 +243,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-split-export-declaration@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.0.tgz#571bfd52701f492920d63b7f735030e9a3e10b55"
+  integrity sha512-7Cuc6JZiYShaZnybDmfwhY4UYHzI6rlqhWjaIqbsJGsIqPimEYy5uh3akSRLMg65LSdSEnJ8a8/bWQN6u2oMGw==
+  dependencies:
+    "@babel/types" "^7.4.0"
+
 "@babel/helper-wrap-function@^7.1.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
@@ -220,14 +260,14 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.2.0"
 
-"@babel/helpers@^7.1.2":
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.3.1.tgz#949eec9ea4b45d3210feb7dc1c22db664c9e44b9"
-  integrity sha512-Q82R3jKsVpUV99mgX50gOPCWwco9Ec5Iln/8Vyu4osNIOQgSrd9RFrQeUvmvddFNoLwMyOUWU+5ckioEKpDoGA==
+"@babel/helpers@^7.2.0":
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.2.tgz#3bdfa46a552ca77ef5a0f8551be5f0845ae989be"
+  integrity sha512-gQR1eQeroDzFBikhrCccm5Gs2xBjZ57DNjGbqTaHo911IpmSxflOQWMAHPw/TXk8L3isv7s9lYzUkexOeTQUYg==
   dependencies:
-    "@babel/template" "^7.1.2"
-    "@babel/traverse" "^7.1.5"
-    "@babel/types" "^7.3.0"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.0"
+    "@babel/types" "^7.4.0"
 
 "@babel/highlight@^7.0.0":
   version "7.0.0"
@@ -238,12 +278,17 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.2", "@babel/parser@^7.2.2", "@babel/parser@^7.3.4":
+"@babel/parser@^7.2.2", "@babel/parser@^7.3.4":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.4.tgz#a43357e4bbf4b92a437fb9e465c192848287f27c"
   integrity sha512-tXZCqWtlOOP4wgCp6RjRvLmfuhnqTLy9VHwRochJBCP2nDm27JnnuFEnXFASVyQNHk36jD1tAammsCEEqgscIQ==
 
-"@babel/plugin-proposal-async-generator-functions@^7.1.0":
+"@babel/parser@^7.4.0":
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.2.tgz#b4521a400cb5a871eab3890787b4bc1326d38d91"
+  integrity sha512-9fJTDipQFvlfSVdD/JBtkiY0br9BtfvW2R8wo6CX/Ej2eMuV0gWPk1M67Mt3eggQvBqYW1FCEk8BN7WvGm/g5g==
+
+"@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
   integrity sha512-+Dfo/SCQqrwx48ptLVGLdE39YtWRuKc/Y9I5Fy0P1DDBB9lsAHpjcEJQt+4IifuSOSTLBKJObJqMvaO1pIE8LQ==
@@ -252,29 +297,24 @@
     "@babel/helper-remap-async-to-generator" "^7.1.0"
     "@babel/plugin-syntax-async-generators" "^7.2.0"
 
-"@babel/plugin-proposal-class-properties@7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.1.0.tgz#9af01856b1241db60ec8838d84691aa0bd1e8df4"
-  integrity sha512-/PCJWN+CKt5v1xcGn4vnuu13QDoV+P7NcICP44BoonAJoPSGwVkgrXihFIQGiEjjPlUDBIw1cM7wYFLARS2/hw==
+"@babel/plugin-proposal-class-properties@7.3.4":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.4.tgz#410f5173b3dc45939f9ab30ca26684d72901405e"
+  integrity sha512-lUf8D3HLs4yYlAo8zjuneLvfxN7qfKv1Yzbj5vjqaqMJxgJA3Ipwp4VUJ+OrOdz53Wbww6ahwB8UhB2HQyLotA==
   dependencies:
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/helper-member-expression-to-functions" "^7.0.0"
-    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-create-class-features-plugin" "^7.3.4"
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.1.0"
-    "@babel/plugin-syntax-class-properties" "^7.0.0"
 
-"@babel/plugin-proposal-decorators@7.1.2":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz#79829bd75fced6581ec6c7ab1930e8d738e892e7"
-  integrity sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q==
+"@babel/plugin-proposal-decorators@7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.3.0.tgz#637ba075fa780b1f75d08186e8fb4357d03a72a7"
+  integrity sha512-3W/oCUmsO43FmZIqermmq6TKaRSYhmh/vybPfVFwQWdSb8xwki38uAIvknCRzuyHRuYfCYmJzL9or1v0AffPjg==
   dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.3.0"
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.0.0"
-    "@babel/plugin-syntax-decorators" "^7.1.0"
+    "@babel/plugin-syntax-decorators" "^7.2.0"
 
-"@babel/plugin-proposal-json-strings@^7.0.0":
+"@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
   integrity sha512-MAFV1CA/YVmYwZG0fBQyXhmj0BHCB5egZHCKWIFVv/XCxAeVGIHfos3SwDck4LvCllENIAg7xMKOG5kH0dzyUg==
@@ -282,15 +322,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-json-strings" "^7.2.0"
 
-"@babel/plugin-proposal-object-rest-spread@7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.0.0.tgz#9a17b547f64d0676b6c9cecd4edf74a82ab85e7e"
-  integrity sha512-14fhfoPcNu7itSen7Py1iGN0gEm87hX/B+8nZPqkdmANyyYWYMY2pjA3r8WXbWVKMzfnSNS0xY8GVS0IjXi/iw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-
-"@babel/plugin-proposal-object-rest-spread@^7.0.0":
+"@babel/plugin-proposal-object-rest-spread@7.3.4":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.4.tgz#47f73cf7f2a721aad5c0261205405c642e424654"
   integrity sha512-j7VQmbbkA+qrzNqbKHrBsW3ddFnOeva6wzSe/zB7T+xaxGc+RCpwo44wCmRixAIGRoIpmVgvzFzNJqQcO3/9RA==
@@ -298,7 +330,15 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.0.0":
+"@babel/plugin-proposal-object-rest-spread@^7.3.4":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.0.tgz#e4960575205eadf2a1ab4e0c79f9504d5b82a97f"
+  integrity sha512-uTNi8pPYyUH2eWHyYWWSYJKwKg34hhgl4/dbejEjL+64OhbHjTX7wEVWMQl82tEmdDsGeu77+s8HHLS627h6OQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+
+"@babel/plugin-proposal-optional-catch-binding@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
   integrity sha512-mgYj3jCcxug6KUcX4OBoOJz3CMrwRfQELPQ5560F70YQUBZB7uac9fqaWamKR1iWUzGiK2t0ygzjTScZnVz75g==
@@ -306,30 +346,23 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.2.0.tgz#abe7281fe46c95ddc143a65e5358647792039520"
-  integrity sha512-LvRVYb7kikuOtIoUeWTkOxQEV1kYvL5B6U3iWEGCzPNRus1MzJweFqORTj+0jkxozkTSYNJozPOddxmqdqsRpw==
+"@babel/plugin-proposal-unicode-property-regex@^7.2.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.0.tgz#202d91ee977d760ef83f4f416b280d568be84623"
+  integrity sha512-h/KjEZ3nK9wv1P1FSNb9G079jXrNYR0Ko+7XkOx85+gM24iZbPn0rh4vCftk+5QKY7y1uByFataBTmX7irEF1w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
-    regexpu-core "^4.2.0"
+    regexpu-core "^4.5.4"
 
-"@babel/plugin-syntax-async-generators@^7.0.0", "@babel/plugin-syntax-async-generators@^7.2.0":
+"@babel/plugin-syntax-async-generators@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
   integrity sha512-1ZrIRBv2t0GSlcwVoQ6VgSLpLgiN/FVQUzt9znxo7v2Ov4jJrs8RY8tv0wvDmFN3qIdMKWrmMMW6yZ0G19MfGg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-class-properties@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.2.0.tgz#23b3b7b9bcdabd73672a9149f728cd3be6214812"
-  integrity sha512-UxYaGXYQ7rrKJS/PxIKRkv3exi05oH7rokBAsmCSsCxz1sVPZ7Fu6FzKoGgUvmY+0YgSkYHgUoCh5R5bCNBQlw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
-"@babel/plugin-syntax-decorators@^7.1.0":
+"@babel/plugin-syntax-decorators@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.2.0.tgz#c50b1b957dcc69e4b1127b65e1c33eef61570c1b"
   integrity sha512-38QdqVoXdHUQfTpZo3rQwqQdWtCn5tMv4uV6r2RMfTqNBuv4ZBhz79SfaQWKTVmxHjeFv/DnXVC/+agHCklYWA==
@@ -350,14 +383,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0":
+"@babel/plugin-syntax-object-rest-spread@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
   integrity sha512-t0JKGgqk2We+9may3t0xDdmneaXmyxq0xieYcKHxIsrJO64n1OiMWNUtc5gQK1PA0NpdCRrtZp4z+IUaKugrSA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.0.0", "@babel/plugin-syntax-optional-catch-binding@^7.2.0":
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
   integrity sha512-bDe4xKNhb0LI7IvZHiA13kff0KEfaGX/Hv4lMA9+7TEc63hMNvfKo6ZFpXhKuEp+II/q35Gc4NoMeDZyaUbj9w==
@@ -371,66 +404,66 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-arrow-functions@^7.0.0":
+"@babel/plugin-transform-arrow-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
   integrity sha512-ER77Cax1+8/8jCB9fo4Ud161OZzWN5qawi4GusDuRLcDbDG+bIGYY20zb2dfAFdTRGzrfq2xZPvF0R64EHnimg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-async-to-generator@^7.1.0":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.3.4.tgz#4e45408d3c3da231c0e7b823f407a53a7eb3048c"
-  integrity sha512-Y7nCzv2fw/jEZ9f678MuKdMo99MFDJMT/PvD9LisrR5JDFcJH6vYeH6RnjVt3p5tceyGRvTtEN0VOlU+rgHZjA==
+"@babel/plugin-transform-async-to-generator@^7.3.4":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.4.0.tgz#234fe3e458dce95865c0d152d256119b237834b0"
+  integrity sha512-EeaFdCeUULM+GPFEsf7pFcNSxM7hYjoj5fiYbyuiXobW4JhFnjAv9OWzNwHyHcKoPNpAfeRDuW6VyaXEDUBa7g==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-remap-async-to-generator" "^7.1.0"
 
-"@babel/plugin-transform-block-scoped-functions@^7.0.0":
+"@babel/plugin-transform-block-scoped-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190"
   integrity sha512-ntQPR6q1/NKuphly49+QiQiTN0O63uOwjdD6dhIjSWBI5xlrbUFh720TIpzBhpnrLfv2tNH/BXvLIab1+BAI0w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-block-scoping@^7.0.0":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.3.4.tgz#5c22c339de234076eee96c8783b2fed61202c5c4"
-  integrity sha512-blRr2O8IOZLAOJklXLV4WhcEzpYafYQKSGT3+R26lWG41u/FODJuBggehtOwilVAcFu393v3OFj+HmaE6tVjhA==
+"@babel/plugin-transform-block-scoping@^7.3.4":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.4.0.tgz#164df3bb41e3deb954c4ca32ffa9fcaa56d30bcb"
+  integrity sha512-AWyt3k+fBXQqt2qb9r97tn3iBwFpiv9xdAiG+Gr2HpAZpuayvbL55yWrsV3MyHvXk/4vmSiedhDRl1YI2Iy5nQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.11"
 
-"@babel/plugin-transform-classes@^7.1.0":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.3.4.tgz#dc173cb999c6c5297e0b5f2277fdaaec3739d0cc"
-  integrity sha512-J9fAvCFBkXEvBimgYxCjvaVDzL6thk0j0dBvCeZmIUDBwyt+nv6HfbImsSrWsYXfDNDivyANgJlFXDUWRTZBuA==
+"@babel/plugin-transform-classes@^7.3.4":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.4.0.tgz#e3428d3c8a3d01f33b10c529b998ba1707043d4d"
+  integrity sha512-XGg1Mhbw4LDmrO9rSTNe+uI79tQPdGs0YASlxgweYRLZqo/EQktjaOV4tchL/UZbM0F+/94uOipmdNGoaGOEYg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-define-map" "^7.1.0"
+    "@babel/helper-define-map" "^7.4.0"
     "@babel/helper-function-name" "^7.1.0"
     "@babel/helper-optimise-call-expression" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.3.4"
-    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.4.0"
+    "@babel/helper-split-export-declaration" "^7.4.0"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.0.0":
+"@babel/plugin-transform-computed-properties@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz#83a7df6a658865b1c8f641d510c6f3af220216da"
   integrity sha512-kP/drqTxY6Xt3NNpKiMomfgkNn4o7+vKxK2DDKcBG9sHj51vHqMBGy8wbDS/J4lMxnqs153/T3+DmCEAkC5cpA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-destructuring@^7.0.0":
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.3.2.tgz#f2f5520be055ba1c38c41c0e094d8a461dd78f2d"
-  integrity sha512-Lrj/u53Ufqxl/sGxyjsJ2XNtNuEjDyjpqdhMNh5aZ+XFOdThL46KBj27Uem4ggoezSYBxKWAil6Hu8HtwqesYw==
+"@babel/plugin-transform-destructuring@^7.2.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.4.0.tgz#acbb9b2418d290107db333f4d6cd8aa6aea00343"
+  integrity sha512-HySkoatyYTY3ZwLI8GGvkRWCFrjAGXUHur5sMecmCIdIharnlcWWivOqDJI76vvmVZfzwb6G08NREsrY96RhGQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-dotall-regex@^7.0.0":
+"@babel/plugin-transform-dotall-regex@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.2.0.tgz#f0aabb93d120a8ac61e925ea0ba440812dbe0e49"
   integrity sha512-sKxnyHfizweTgKZf7XsXu/CNupKhzijptfTM+bozonIuyVrLWVUvYjE2bhuSBML8VQeMxq4Mm63Q9qvcvUcciQ==
@@ -439,14 +472,14 @@
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
-"@babel/plugin-transform-duplicate-keys@^7.0.0":
+"@babel/plugin-transform-duplicate-keys@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.2.0.tgz#d952c4930f312a4dbfff18f0b2914e60c35530b3"
   integrity sha512-q+yuxW4DsTjNceUiTzK0L+AfQ0zD9rWaTLiUqHA8p0gxx7lu1EylenfzjeIWNkPy6e/0VG/Wjw9uf9LueQwLOw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-exponentiation-operator@^7.1.0":
+"@babel/plugin-transform-exponentiation-operator@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz#a63868289e5b4007f7054d46491af51435766008"
   integrity sha512-umh4hR6N7mu4Elq9GG8TOu9M0bakvlsREEC+ialrQN6ABS4oDQ69qJv1VtR3uxlKMCQMCvzk7vr17RHKcjx68A==
@@ -454,14 +487,14 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-for-of@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.2.0.tgz#ab7468befa80f764bb03d3cb5eef8cc998e1cad9"
-  integrity sha512-Kz7Mt0SsV2tQk6jG5bBv5phVbkd0gd27SgYD4hH1aLMJRchM0dzHaXvrWhVZ+WxAlDoAKZ7Uy3jVTW2mKXQ1WQ==
+"@babel/plugin-transform-for-of@^7.2.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.0.tgz#56c8c36677f5d4a16b80b12f7b768de064aaeb5f"
+  integrity sha512-vWdfCEYLlYSxbsKj5lGtzA49K3KANtb8qCPQ1em07txJzsBwY+cKJzBHizj5fl3CCx7vt+WPdgDLTHmydkbQSQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-function-name@^7.1.0":
+"@babel/plugin-transform-function-name@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.2.0.tgz#f7930362829ff99a3174c39f0afcc024ef59731a"
   integrity sha512-kWgksow9lHdvBC2Z4mxTsvc7YdY7w/V6B2vy9cTIPtLEE9NhwoWivaxdNM/S37elu5bqlLP/qOY906LukO9lkQ==
@@ -469,14 +502,14 @@
     "@babel/helper-function-name" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-literals@^7.0.0":
+"@babel/plugin-transform-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz#690353e81f9267dad4fd8cfd77eafa86aba53ea1"
   integrity sha512-2ThDhm4lI4oV7fVQ6pNNK+sx+c/GM5/SaML0w/r4ZB7sAneD/piDJtwdKlNckXeyGK7wlwg2E2w33C/Hh+VFCg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-amd@^7.1.0":
+"@babel/plugin-transform-modules-amd@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.2.0.tgz#82a9bce45b95441f617a24011dc89d12da7f4ee6"
   integrity sha512-mK2A8ucqz1qhrdqjS9VMIDfIvvT2thrEsIQzbaTdc5QFzhDjQv2CkJJ5f6BXIkgbmaoax3zBr2RyvV/8zeoUZw==
@@ -484,24 +517,24 @@
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-commonjs@^7.1.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.2.0.tgz#c4f1933f5991d5145e9cfad1dfd848ea1727f404"
-  integrity sha512-V6y0uaUQrQPXUrmj+hgnks8va2L0zcZymeU7TtWEgdRLNkceafKXEduv7QzgQAE4lT+suwooG9dC7LFhdRAbVQ==
+"@babel/plugin-transform-modules-commonjs@^7.2.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.4.0.tgz#3b8ec61714d3b75d20c5ccfa157f2c2e087fd4ca"
+  integrity sha512-iWKAooAkipG7g1IY0eah7SumzfnIT3WNhT4uYB2kIsvHnNSB6MDYVa5qyICSwaTBDBY2c4SnJ3JtEa6ltJd6Jw==
   dependencies:
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-simple-access" "^7.1.0"
 
-"@babel/plugin-transform-modules-systemjs@^7.0.0":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.3.4.tgz#813b34cd9acb6ba70a84939f3680be0eb2e58861"
-  integrity sha512-VZ4+jlGOF36S7TjKs8g4ojp4MEI+ebCQZdswWb/T9I4X84j8OtFAyjXjt/M16iIm5RIZn0UMQgg/VgIwo/87vw==
+"@babel/plugin-transform-modules-systemjs@^7.3.4":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.4.0.tgz#c2495e55528135797bc816f5d50f851698c586a1"
+  integrity sha512-gjPdHmqiNhVoBqus5qK60mWPp1CmYWp/tkh11mvb0rrys01HycEGD7NvvSoKXlWEfSM9TcL36CpsK8ElsADptQ==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.0.0"
+    "@babel/helper-hoist-variables" "^7.4.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-umd@^7.1.0":
+"@babel/plugin-transform-modules-umd@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz#7678ce75169f0877b8eb2235538c074268dd01ae"
   integrity sha512-BV3bw6MyUH1iIsGhXlOK6sXhmSarZjtJ/vMiD9dNmpY8QXFFQTj+6v92pcfy1iqa8DeAfJFwoxcrS/TUZda6sw==
@@ -509,6 +542,13 @@
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.3.0":
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.4.2.tgz#800391136d6cbcc80728dbdba3c1c6e46f86c12e"
+  integrity sha512-NsAuliSwkL3WO2dzWTOL1oZJHm0TM8ZY8ZSxk2ANyKkt5SQlToGA4pzctmq1BEjoacurdwZ3xp2dCQWJkME0gQ==
+  dependencies:
+    regexp-tree "^0.1.0"
+
 "@babel/plugin-transform-new-target@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.0.0.tgz#ae8fbd89517fa7892d20e6564e641e8770c3aa4a"
@@ -516,7 +556,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-object-super@^7.1.0":
+"@babel/plugin-transform-object-super@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.2.0.tgz#b35d4c10f56bab5d650047dad0f1d8e8814b6598"
   integrity sha512-VMyhPYZISFZAqAPVkiYb7dUe2AsVi2/wCT5+wZdsNO31FojQJa9ns40hzZ6U9f50Jlq4w6qwzdBB2uwqZ00ebg==
@@ -524,19 +564,19 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-replace-supers" "^7.1.0"
 
-"@babel/plugin-transform-parameters@^7.1.0":
-  version "7.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.3.3.tgz#3a873e07114e1a5bee17d04815662c8317f10e30"
-  integrity sha512-IrIP25VvXWu/VlBWTpsjGptpomtIkYrN/3aDp4UKm7xK6UxZY88kcJ1UwETbzHAlwN21MnNfwlar0u8y3KpiXw==
+"@babel/plugin-transform-parameters@^7.2.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.0.tgz#a1309426fac4eecd2a9439a4c8c35124a11a48a9"
+  integrity sha512-Xqv6d1X+doyiuCGDoVJFtlZx0onAX0tnc3dY8w71pv/O0dODAbusVv2Ale3cGOwfiyi895ivOBhYa9DhAM8dUA==
   dependencies:
-    "@babel/helper-call-delegate" "^7.1.0"
+    "@babel/helper-call-delegate" "^7.4.0"
     "@babel/helper-get-function-arity" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-react-constant-elements@7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.0.0.tgz#ab413e33e9c46a766f5326014bcbf9e2b34ef7a4"
-  integrity sha512-z8yrW4KCVcqPYr0r9dHXe7fu3daLzn0r6TQEFoGbXahdrzEwT1d1ux+/EnFcqIHv9uPilUlnRnPIUf7GMO0ehg==
+"@babel/plugin-transform-react-constant-elements@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.2.0.tgz#ed602dc2d8bff2f0cb1a5ce29263dbdec40779f7"
+  integrity sha512-YYQFg6giRFMsZPKUM9v+VcHOdfSQdz9jHCx3akAi3UYgyjndmdYGSXylQ/V+HswQt4fL8IklchD9HTsaOCrWQQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -548,10 +588,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-react-inline-elements@7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-inline-elements/-/plugin-transform-react-inline-elements-7.0.0.tgz#caec13a7829b34d7eb64dfe9fc310326f74f7b05"
-  integrity sha512-2TZsbrzXXwLjUjftRWPtvcAwpdSUp5CIQsVxUqTHRAvbMIcIRnz8C670eMUW5ZTQBTjdIRFGt9nkq53iCinu9g==
+"@babel/plugin-transform-react-inline-elements@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-inline-elements/-/plugin-transform-react-inline-elements-7.2.0.tgz#3e36e7c47f1c21f52b2b0090d5cd83ceb19a4770"
+  integrity sha512-OAflI+josEl8xoAzZYpFnN+C4e9wvxDecExTtvDsteAcChIZtsH/D2kMNcJnrrzbFzCroGajCTr9tAB7K0KsiQ==
   dependencies:
     "@babel/helper-builder-react-jsx" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -581,28 +621,28 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.2.0"
 
-"@babel/plugin-transform-regenerator@^7.0.0":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.3.4.tgz#1601655c362f5b38eead6a52631f5106b29fa46a"
-  integrity sha512-hvJg8EReQvXT6G9H2MvNPXkv9zK36Vxa1+csAVTpE1J3j0zlHplw76uudEbJxgvqZzAq9Yh45FLD4pk5mKRFQA==
+"@babel/plugin-transform-regenerator@^7.3.4":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.4.0.tgz#0780e27ee458cc3fdbad18294d703e972ae1f6d1"
+  integrity sha512-SZ+CgL4F0wm4npojPU6swo/cK4FcbLgxLd4cWpHaNXY/NJ2dpahODCqBbAwb2rDmVszVb3SSjnk9/vik3AYdBw==
   dependencies:
     regenerator-transform "^0.13.4"
 
-"@babel/plugin-transform-shorthand-properties@^7.0.0":
+"@babel/plugin-transform-shorthand-properties@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
   integrity sha512-QP4eUM83ha9zmYtpbnyjTLAGKQritA5XW/iG9cjtuOI8s1RuL/3V6a3DeSHfKutJQ+ayUfeZJPcnCYEQzaPQqg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-spread@^7.0.0":
+"@babel/plugin-transform-spread@^7.2.0":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.2.2.tgz#3103a9abe22f742b6d406ecd3cd49b774919b406"
   integrity sha512-KWfky/58vubwtS0hLqEnrWJjsMGaOeSBn90Ezn5Jeg9Z8KKHmELbP1yGylMlm5N6TPKeY9A2+UaSYLdxahg01w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-sticky-regex@^7.0.0":
+"@babel/plugin-transform-sticky-regex@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz#a1e454b5995560a9c1e0d537dfc15061fd2687e1"
   integrity sha512-KKYCoGaRAf+ckH8gEL3JHUaFVyNHKe3ASNsZ+AlktgHevvxGigoIttrEJb8iKN03Q7Eazlv1s6cx2B2cQ3Jabw==
@@ -610,7 +650,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
 
-"@babel/plugin-transform-template-literals@^7.0.0":
+"@babel/plugin-transform-template-literals@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.2.0.tgz#d87ed01b8eaac7a92473f608c97c089de2ba1e5b"
   integrity sha512-FkPix00J9A/XWXv4VoKJBMeSkyY9x/TqIh76wzcdfl57RJJcf8CehQ08uwfhCDNtRQYtHQKBTwKZDEyjE13Lwg==
@@ -618,22 +658,22 @@
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-typeof-symbol@^7.0.0":
+"@babel/plugin-transform-typeof-symbol@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2"
   integrity sha512-2LNhETWYxiYysBtrBTqL8+La0jIoQQnIScUJc74OYvUGRmkskNY4EzLCnjHBzdmb38wqtTaixpo1NctEcvMDZw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-typescript@^7.1.0":
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.3.2.tgz#59a7227163e55738842f043d9e5bd7c040447d96"
-  integrity sha512-Pvco0x0ZSCnexJnshMfaibQ5hnK8aUHSvjCQhC1JR8eeg+iBwt0AtCO7gWxJ358zZevuf9wPSO5rv+WJcbHPXQ==
+"@babel/plugin-transform-typescript@^7.3.2":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.4.0.tgz#0389ec53a34e80f99f708c4ca311181449a68eb1"
+  integrity sha512-U7/+zKnRZg04ggM/Bm+xmu2B/PrwyDQTT/V89FXWYWNMxBDwSx56u6jtk9SEbfLFbZaEI72L+5LPvQjeZgFCrQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-typescript" "^7.2.0"
 
-"@babel/plugin-transform-unicode-regex@^7.0.0":
+"@babel/plugin-transform-unicode-regex@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.2.0.tgz#4eb8db16f972f8abb5062c161b8b115546ade08b"
   integrity sha512-m48Y0lMhrbXEJnVUaYly29jRXbQ3ksxPrS1Tg8t+MHqzXhtBYAvI51euOBaoAlZLPHsieY9XPVMf80a5x0cPcA==
@@ -642,49 +682,51 @@
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
-"@babel/preset-env@7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.0.tgz#e67ea5b0441cfeab1d6f41e9b5c79798800e8d11"
-  integrity sha512-ZLVSynfAoDHB/34A17/JCZbyrzbQj59QC1Anyueb4Bwjh373nVPq5/HMph0z+tCmcDjXDe+DlKQq9ywQuvWrQg==
+"@babel/preset-env@7.3.4":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1"
+  integrity sha512-2mwqfYMK8weA0g0uBKOt4FE3iEodiHy9/CW0b+nWXcbL+pGzLx8ESYc+j9IIxr6LTDHWKgPm71i9smo02bw+gA==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.1.0"
-    "@babel/plugin-proposal-json-strings" "^7.0.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.0.0"
-    "@babel/plugin-syntax-async-generators" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.0.0"
-    "@babel/plugin-transform-arrow-functions" "^7.0.0"
-    "@babel/plugin-transform-async-to-generator" "^7.1.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.0.0"
-    "@babel/plugin-transform-block-scoping" "^7.0.0"
-    "@babel/plugin-transform-classes" "^7.1.0"
-    "@babel/plugin-transform-computed-properties" "^7.0.0"
-    "@babel/plugin-transform-destructuring" "^7.0.0"
-    "@babel/plugin-transform-dotall-regex" "^7.0.0"
-    "@babel/plugin-transform-duplicate-keys" "^7.0.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.1.0"
-    "@babel/plugin-transform-for-of" "^7.0.0"
-    "@babel/plugin-transform-function-name" "^7.1.0"
-    "@babel/plugin-transform-literals" "^7.0.0"
-    "@babel/plugin-transform-modules-amd" "^7.1.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.1.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.0.0"
-    "@babel/plugin-transform-modules-umd" "^7.1.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.3.4"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.2.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.3.4"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.3.4"
+    "@babel/plugin-transform-classes" "^7.3.4"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.2.0"
+    "@babel/plugin-transform-dotall-regex" "^7.2.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.2.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.2.0"
+    "@babel/plugin-transform-function-name" "^7.2.0"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.2.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.3.4"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.3.0"
     "@babel/plugin-transform-new-target" "^7.0.0"
-    "@babel/plugin-transform-object-super" "^7.1.0"
-    "@babel/plugin-transform-parameters" "^7.1.0"
-    "@babel/plugin-transform-regenerator" "^7.0.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
-    "@babel/plugin-transform-spread" "^7.0.0"
-    "@babel/plugin-transform-sticky-regex" "^7.0.0"
-    "@babel/plugin-transform-template-literals" "^7.0.0"
-    "@babel/plugin-transform-typeof-symbol" "^7.0.0"
-    "@babel/plugin-transform-unicode-regex" "^7.0.0"
-    browserslist "^4.1.0"
+    "@babel/plugin-transform-object-super" "^7.2.0"
+    "@babel/plugin-transform-parameters" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.3.4"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.2.0"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.2.0"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.2.0"
+    browserslist "^4.3.4"
     invariant "^2.2.2"
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
@@ -700,13 +742,13 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/preset-typescript@7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.1.0.tgz#49ad6e2084ff0bfb5f1f7fb3b5e76c434d442c7f"
-  integrity sha512-LYveByuF9AOM8WrsNne5+N79k1YxjNB6gmpCQsnuSBAcV8QUeB+ZUxQzL7Rz7HksPbahymKkq2qBR+o36ggFZA==
+"@babel/preset-typescript@7.3.3":
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz#88669911053fa16b2b276ea2ede2ca603b3f307a"
+  integrity sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-typescript" "^7.1.0"
+    "@babel/plugin-transform-typescript" "^7.3.2"
 
 "@babel/register@7.0.0":
   version "7.0.0"
@@ -721,7 +763,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.9"
 
-"@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
+"@babel/template@^7.1.0", "@babel/template@^7.2.2":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
   integrity sha512-zRL0IMM02AUDwghf5LMSSDEz7sBCO2YnNmpg3uWTZj/v1rcG2BmQUvaGU8GhU8BvfMh1k2KIAYZ7Ji9KXPUg7g==
@@ -730,7 +772,16 @@
     "@babel/parser" "^7.2.2"
     "@babel/types" "^7.2.2"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.3.4":
+"@babel/template@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b"
+  integrity sha512-SOWwxxClTTh5NdbbYZ0BmaBVzxzTh2tO/TeLTbF6MO6EzVhHTnff8CdBXx3mEtazFBoysmEM6GU/wF+SuSx4Fw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.4.0"
+    "@babel/types" "^7.4.0"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.3.4":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.3.4.tgz#1330aab72234f8dea091b08c4f8b9d05c7119e06"
   integrity sha512-TvTHKp6471OYEcE/91uWmhR6PrrYywQntCHSaZ8CM8Vmp+pjAusal4nGB2WCCQd0rvI7nOMKn9GnbcvTUz3/ZQ==
@@ -745,7 +796,22 @@
     globals "^11.1.0"
     lodash "^4.17.11"
 
-"@babel/types@^7.0.0", "@babel/types@^7.1.2", "@babel/types@^7.2.0", "@babel/types@^7.2.2", "@babel/types@^7.3.0", "@babel/types@^7.3.4":
+"@babel/traverse@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.0.tgz#14006967dd1d2b3494cdd650c686db9daf0ddada"
+  integrity sha512-/DtIHKfyg2bBKnIN+BItaIlEg5pjAnzHOIQe5w+rHAw/rg9g0V7T4rqPX8BJPfW11kt3koyjAnTNwCzb28Y1PA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.4.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.0"
+    "@babel/parser" "^7.4.0"
+    "@babel/types" "^7.4.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
+
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.2.2", "@babel/types@^7.3.0", "@babel/types@^7.3.4":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed"
   integrity sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==
@@ -754,12 +820,14 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@emotion/is-prop-valid@^0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85"
-  integrity sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==
+"@babel/types@^7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.0.tgz#670724f77d24cce6cc7d8cf64599d511d164894c"
+  integrity sha512-aPvkXyU2SPOnztlgo8n9cEiXW755mgyvueUPcpStqdzoSPm0fjO0vQBjLkt3JKJW7ufikfcnMTTPsN1xaTsBPA==
   dependencies:
-    "@emotion/memoize" "^0.6.6"
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
 
 "@emotion/is-prop-valid@^0.7.3":
   version "0.7.3"
@@ -773,11 +841,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
   integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
 
-"@emotion/memoize@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
-  integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
-
 "@emotion/unitless@^0.7.0":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
@@ -813,11 +876,6 @@
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.1.5.tgz#e31be003956e1fa8c860124d99bea9ae327ae37b"
   integrity sha512-GlN74UAcT2i+G4BzVVI/aHip0HDXZaiY11VEjHzAz74+dB3hIeM5lJmnnZx4acxxinK9lT+uEH1Vsa5aWj6w4Q==
 
-"@types/node@*":
-  version "11.10.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.10.4.tgz#3f5fc4f0f322805f009e00ab35a2ff3d6b778e42"
-  integrity sha512-wa09itaLE8L705aXd8F80jnFpxz3Y1/KRHfKsYL2bPc0XF+wEWu8sR9n5bmeu8Ba1N9z2GRNzm/YdHcghLkLKg==
-
 "@types/node@^10.0.5":
   version "10.12.29"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.29.tgz#c2c8d2d27bb55649fbafe8ea1731658421f38acf"
@@ -828,13 +886,21 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.0.tgz#4c48fed958d6dcf9487195a0ef6456d5f6e0163a"
   integrity sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg==
 
-"@types/react-dom@16.8.0":
-  version "16.8.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.0.tgz#c565f43f9d2ec911f9e0b8f3b74e25e67879aa3f"
-  integrity sha512-Jp4ufcEEjVJEB0OHq2MCZcE1u3KYUKO6WnSuiU/tZeYeiZxUoQavfa/TZeiIT+1XoN6l0lQVNM30VINZFDeolQ==
+"@types/react-dom@16.8.3":
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.3.tgz#6131b7b6158bc7ed1925a3374b88b7c00481f0cb"
+  integrity sha512-HF5hD5YR3z9Mn6kXcW1VKe4AQ04ZlZj1EdLBae61hzQ3eEWWxMgNLUbIxeZp40BnSxqY1eAYLsH9QopQcxzScA==
   dependencies:
     "@types/react" "*"
 
+"@types/react-native@*":
+  version "0.57.42"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.57.42.tgz#06ad92cd1378146402b7667de13cb7b935d194d6"
+  integrity sha512-Ms4RI8Oyi8HOIwlteFhgRE7TA9chP/mliLeJCzjKBOywYpile5TrXQF8lRDYzcC1zyTyoopu/u8VMlF+FS7VnA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
 "@types/react-router@3":
   version "3.0.20"
   resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-3.0.20.tgz#a711682475ccef70ad9ad9e459859380221e6ee6"
@@ -843,21 +909,22 @@
     "@types/history" "^3"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.8.2":
-  version "16.8.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.2.tgz#3b7a7f7ea89d1c7d68b00849fb5de839011c077b"
-  integrity sha512-6mcKsqlqkN9xADrwiUz2gm9Wg4iGnlVGciwBRYFQSMWG6MQjhOZ/AVnxn+6v8nslFgfYTV8fNdE6XwKu6va5PA==
+"@types/react@*", "@types/react@16.8.10":
+  version "16.8.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.10.tgz#1ccb6fde17f71a62ef055382ec68bdc379d4d8d9"
+  integrity sha512-7bUQeZKP4XZH/aB4i7k1i5yuwymDu/hnLMhD9NjVZvQQH7ZUgRN3d6iu8YXzx4sN/tNr0bj8jgguk8hhObzGvA==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/styled-components@4.0.3":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.0.3.tgz#8287e54e446302369eecc521243a2f32cf9122ee"
-  integrity sha512-LzntHlOKEOxUxMkVmQPNG88TsldeHO2NlwNkzHnw4wL8qhHQgd7u+u3yw84hZgoFh4ugsLCbFtjYcbP7v5WC5Q==
+"@types/styled-components@4.1.12":
+  version "4.1.12"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.12.tgz#62c19bd1aa37b1a904d36c179a0fec66c24ac99c"
+  integrity sha512-Du0bltHm5sWkDnXzYi6cMNhnSKWHQW6//at359DtRJNfjeG1SdtqQPX6jiVtrUkBJ1JsjxqT18DssYBLJ/fg/A==
   dependencies:
-    "@types/node" "*"
     "@types/react" "*"
+    "@types/react-native" "*"
+    csstype "^2.2.0"
 
 abbrev@1:
   version "1.1.1"
@@ -902,6 +969,13 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -942,10 +1016,30 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-babel-plugin-module-resolver@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.1.1.tgz#881cf67e3d4b8400d5eaaefc1be44d2dc1fe404f"
-  integrity sha512-1Q77Al4ydp6nYApJ7sQ2fmgz30WuQgJZegIYuyOdbdpxenB/bSezQ3hDPsumIXGlUS4vUIv+EwFjzzXZNWtARw==
+autoprefixer@9.4.10:
+  version "9.4.10"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.4.10.tgz#e1be61fc728bacac8f4252ed242711ec0dcc6a7b"
+  integrity sha512-XR8XZ09tUrrSzgSlys4+hy5r2/z4Jp7Ag3pHm31U4g/CTccYPOVe19AkaJ4ey/vRd1sfj+5TtuD6I0PXtutjvQ==
+  dependencies:
+    browserslist "^4.4.2"
+    caniuse-lite "^1.0.30000940"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.14"
+    postcss-value-parser "^3.3.1"
+
+babel-plugin-macros@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.0.tgz#01f4d3b50ed567a67b80a30b9da066e94f4097b6"
+  integrity sha512-BWw0lD0kVZAXRD3Od1kMrdmfudqzDzYv2qrN3l2ISR1HVp1EgLKfbOrYV9xmY5k3qx3RIu5uPAUZZZHpo0o5Iw==
+  dependencies:
+    cosmiconfig "^5.0.5"
+    resolve "^1.8.1"
+
+babel-plugin-module-resolver@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz#ddfa5e301e3b9aa12d852a9979f18b37881ff5a7"
+  integrity sha512-tjR0GvSndzPew/Iayf4uICWZqjBwnlMWjSx6brryfQ81F9rxBVqwDJtFCV8oOs0+vJeefK9TmdZtkIFdFe1UnA==
   dependencies:
     find-babel-config "^1.1.0"
     glob "^7.1.2"
@@ -1015,14 +1109,14 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-browserslist@^4.1.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.4.2.tgz#6ea8a74d6464bb0bd549105f659b41197d8f0ba2"
-  integrity sha512-ISS/AIAiHERJ3d45Fz0AVYKkgcy+F/eJHzKEvv1j0wwKGKD9T3BrwKr/5g45L+Y4XIK5PlTqefHciRFcfE1Jxg==
+browserslist@^4.3.4, browserslist@^4.4.2:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.5.3.tgz#969495c410314bc89f14e748505e58be968080f1"
+  integrity sha512-Tx/Jtrmh6vFg24AelzLwCaCq1IUJiMDM1x/LPzqbmbktF8Zo7F9ONUpOWsFK6TtdON95mSMaQUWqi0ilc8xM6g==
   dependencies:
-    caniuse-lite "^1.0.30000939"
-    electron-to-chromium "^1.3.113"
-    node-releases "^1.1.8"
+    caniuse-lite "^1.0.30000955"
+    electron-to-chromium "^1.3.122"
+    node-releases "^1.1.12"
 
 buffer-from@^1.0.0:
   version "1.1.1"
@@ -1044,17 +1138,36 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
+
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
 camelize@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
-caniuse-lite@^1.0.30000939:
-  version "1.0.30000940"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000940.tgz#19f2b1497fbfa5b96b615963097c3757f27989ce"
-  integrity sha512-rp/086IBUfCsNgBpko6DGQv674jRjeXPesDatDB2kxrkmDfD+S5Gesw+uT8YjpRWvLKLMRBy72SLRZ8I0EgQFw==
+caniuse-lite@^1.0.30000940, caniuse-lite@^1.0.30000955:
+  version "1.0.30000955"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000955.tgz#360fdb9a1e41d6dd996130411334e44a39e4446d"
+  integrity sha512-6AwmIKgqCYfDWWadRkAuZSHMQP4Mmy96xAXEdRBlN/luQhlRYOKgwOlZ9plpCOsVbBuqbTmGqDK3JUM/nlr8CA==
 
-chalk@^2.0.0:
+chalk@^2.0.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1174,6 +1287,16 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
+cosmiconfig@^5.0.5:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.0.tgz#45038e4d28a7fe787203aede9c25bca4a08b12c8"
+  integrity sha512-nxt+Nfc3JAqf4WIWd0jXLjTJZmsPLrA9DDc4nRw2KFJQJK7DNooqSXrNI7tzLG50CF8axczly5UV929tBmh/7g==
+  dependencies:
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.13.0"
+    parse-json "^4.0.0"
+
 create-react-class@^15.5.1, create-react-class@^15.5.2:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
@@ -1209,13 +1332,6 @@ debug@^2.1.2, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
-  dependencies:
-    ms "^2.1.1"
-
 debug@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
@@ -1265,10 +1381,10 @@ detect-libc@^1.0.2:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-electron-to-chromium@^1.3.113:
-  version "1.3.113"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.113.tgz#b1ccf619df7295aea17bc6951dc689632629e4a9"
-  integrity sha512-De+lPAxEcpxvqPTyZAXELNpRZXABRxf+uL/rSykstQhzj/B0l1150G/ExIIxKc16lI89Hgz81J0BHAcbTqK49g==
+electron-to-chromium@^1.3.122:
+  version "1.3.122"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.122.tgz#b32a0805f48557bd3c3b8104eadc7fa511b14a9a"
+  integrity sha512-3RKoIyCN4DhP2dsmleuFvpJAIDOseWH88wFYBzb22CSwoFDSWRc4UAMfrtc9h8nBdJjTNIN3rogChgOy6eFInw==
 
 encoding@^0.1.11:
   version "0.1.12"
@@ -1277,11 +1393,23 @@ encoding@^0.1.11:
   dependencies:
     iconv-lite "~0.4.13"
 
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -1381,10 +1509,10 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-fp-ts@1.13.0, fp-ts@^1.0.0, fp-ts@^1.11.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-1.13.0.tgz#004803434e6c92021232746a621d3c2429c3d5cc"
-  integrity sha512-QDPtCkuLay+dX3zinnvt0ER+j8mdWZZSpM//DIY3GycgwUTDPBKFD7CxX5DU/mIDstcWqGuuUSrMNtB6MWluCQ==
+fp-ts@1.15.0, fp-ts@^1.0.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-1.15.0.tgz#7706d6761cc98ccbece91c2ff2e5a5b924f65f3d"
+  integrity sha512-D0gnY9qnpifaqNABqSKjttOW4YVpAHK7I7hcstJllbyqS1GKzbQoAguZYr77DhXzIXnsJiqo65dCHJZq6ouxiQ==
 
 fragment-cache@^0.2.1:
   version "0.2.1"
@@ -1554,6 +1682,14 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -1617,6 +1753,11 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -1661,6 +1802,11 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -1768,6 +1914,14 @@ js-levenshtein@^1.1.3:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-yaml@^3.13.0:
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.0.tgz#38ee7178ac0eea2c97ff6d96fff4b18c7d8cf98e"
+  integrity sha512-pZZoSxcCYco+DIKBTimr67J6Hy+EYGZDY/HCWC+iAEA9h1ByhMXAIVUXMcMFpOCxQ/xjXmPI2MkDL5HRm5eFrQ==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -1778,11 +1932,23 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
-json5@^0.5.0, json5@^0.5.1:
+json-parse-better-errors@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
+  integrity sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==
+  dependencies:
+    minimist "^1.2.0"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -1815,7 +1981,7 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash@^4.17.10, lodash@^4.17.11:
+lodash@4.17.11, lodash@^4.17.10, lodash@^4.17.11:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -1846,10 +2012,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-memoize-one@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
-  integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
+memoize-one@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.2.tgz#6aba5276856d72fb44ead3efab86432f94ba203d"
+  integrity sha512-o7lldN4fs/axqctc03NF+PMhd2veRrWeJ2n2GjEzUPBD4F9rmNg4A+bQCACIzwjHJEXuYv4aFFMaH35KZfHUrw==
 
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
@@ -1917,12 +2083,10 @@ mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
-monocle-ts@1.5.3, monocle-ts@^1.0.0:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/monocle-ts/-/monocle-ts-1.5.3.tgz#70c4253255b6374a7ec2ee1d334bbd4cd44db7ce"
-  integrity sha512-5AMXaJPkTU/CT2c3Imi/mFVUF0xVTWD/rz+JmZZd2uh7nZQuG3mxbv5kfzBWtFRtajnPQ38saLZKgV6AEr627w==
-  dependencies:
-    fp-ts "^1.11.0"
+monocle-ts@1.7.1, monocle-ts@^1.0.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/monocle-ts/-/monocle-ts-1.7.1.tgz#03a615938aa90983a4fa29749969d30f72d80ba1"
+  integrity sha512-X9OzpOyd/R83sYex8NYpJjUzi/MLQMvGNVfxDYiIvs+QMXMEUDwR61MQoARFN10Cqz5h/mbFSPnIQNUIGhYd2Q==
 
 ms@2.0.0:
   version "2.0.0"
@@ -2002,10 +2166,10 @@ node-pre-gyp@^0.10.0:
     semver "^5.3.0"
     tar "^4"
 
-node-releases@^1.1.8:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.9.tgz#70d0985ec4bf7de9f08fc481f5dae111889ca482"
-  integrity sha512-oic3GT4OtbWWKfRolz5Syw0Xus0KRFxeorLNj0s93ofX6PWyuzKjsiGxsCtWktBwwmTF6DdRRf2KreGqeOk5KA==
+node-releases@^1.1.12:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.13.tgz#8c03296b5ae60c08e2ff4f8f22ae45bd2f210083"
+  integrity sha512-fKZGviSXR6YvVPyc011NHuJDSD8gFQvLPmc2d2V3BS4gr52ycyQ1Xzs7a8B+Ax3Ni/W+5h1h4SqmzeoA8WZRmA==
   dependencies:
     semver "^5.3.0"
 
@@ -2029,6 +2193,11 @@ normalize-path@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 npm-bundled@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
@@ -2052,6 +2221,11 @@ npmlog@^4.0.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -2143,6 +2317,14 @@ p-try@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
   integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
 
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -2235,11 +2417,20 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
+postcss@^7.0.14:
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+  integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -2294,15 +2485,15 @@ react-datetime@2.14.0:
     prop-types "^15.5.7"
     react-onclickoutside "^6.5.0"
 
-react-dom@16.8.1:
-  version "16.8.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
-  integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==
+react-dom@16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.1"
+    scheduler "^0.13.6"
 
 react-is@^16.6.0, react-is@^16.8.1:
   version "16.8.3"
@@ -2337,15 +2528,15 @@ react-router@3.2.1:
     prop-types "^15.5.6"
     warning "^3.0.0"
 
-react@16.8.1:
-  version "16.8.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
-  integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==
+react@16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.1"
+    scheduler "^0.13.6"
 
 readable-stream@^2.0.2, readable-stream@^2.0.6:
   version "2.3.6"
@@ -2376,6 +2567,13 @@ regenerate-unicode-properties@^7.0.0:
   dependencies:
     regenerate "^1.4.0"
 
+regenerate-unicode-properties@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.0.2.tgz#7b38faa296252376d363558cfbda90c9ce709662"
+  integrity sha512-SbA/iNrBUf6Pv2zU8Ekv1Qbhv92yxL4hiDa2siuxs4KKn4oOoMDHXjAf7+Nz9qinUQ46B1LcWEi/PhJfPWpZWQ==
+  dependencies:
+    regenerate "^1.4.0"
+
 regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
@@ -2396,7 +2594,12 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexpu-core@^4.1.3, regexpu-core@^4.2.0:
+regexp-tree@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.5.tgz#7cd71fca17198d04b4176efd79713f2998009397"
+  integrity sha512-nUmxvfJyAODw+0B13hj8CFVAxhe7fDEAgJgaotBu3nnR+IgGgZq59YedJP5VYTlkEfqjuK6TuRpnymKdatLZfQ==
+
+regexpu-core@^4.1.3:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.4.0.tgz#8d43e0d1266883969720345e70c275ee0aec0d32"
   integrity sha512-eDDWElbwwI3K0Lo6CqbQbA6FwgtCz4kYTarrri1okfkRLZAqstU+B3voZBCjg8Fl6iq0gXrJG6MvRgLthfvgOA==
@@ -2408,6 +2611,18 @@ regexpu-core@^4.1.3, regexpu-core@^4.2.0:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.0.2"
 
+regexpu-core@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.5.4.tgz#080d9d02289aa87fe1667a4f5136bc98a6aebaae"
+  integrity sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.0.2"
+    regjsgen "^0.5.0"
+    regjsparser "^0.6.0"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.1.0"
+
 regjsgen@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.0.tgz#a7634dc08f89209c2049adda3525711fb97265dd"
@@ -2440,12 +2655,17 @@ reselect@^3.0.1:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
   integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
 
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.3.2, resolve@^1.4.0:
+resolve@^1.3.2, resolve@^1.4.0, resolve@^1.8.1:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba"
   integrity sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==
@@ -2486,10 +2706,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13.1:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.3.tgz#bed3c5850f62ea9c716a4d781f9daeb9b2a58896"
-  integrity sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ==
+scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -2598,7 +2818,7 @@ source-map@^0.5.0, source-map@^0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0:
+source-map@^0.6.0, source-map@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -2610,6 +2830,11 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -2671,16 +2896,17 @@ style-value-types@^3.0.6, style-value-types@^3.0.7:
   resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.0.7.tgz#6e7a22cc8b1a4465193268ed66ad5f2a82579054"
   integrity sha512-7vzeicDiPNnJjvTYfJbQhZ7P3OCkXfvkJOJQ+ifFnXNTA/7KBxMZacHLvlRjM5/TtXbVdrZE6u+2nzSUSPrbSQ==
 
-styled-components@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.2.tgz#f8a685e3b2bcd03c5beac7f2c02bb6ad237da9b3"
-  integrity sha512-NdvWatJ2WLqZxAvto+oH0k7GAC/TlAUJTrHoXJddjbCrU6U23EmVbb9LXJBF+d6q6hH+g9nQYOWYPUeX/Vlc2w==
+styled-components@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.2.0.tgz#811fbbec4d64c7189f6c7482b9eb6fefa7fefef7"
+  integrity sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==
   dependencies:
-    "@emotion/is-prop-valid" "^0.6.8"
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.7.3"
     "@emotion/unitless" "^0.7.0"
     babel-plugin-styled-components ">= 1"
     css-to-react-native "^2.2.2"
-    memoize-one "^4.0.0"
+    memoize-one "^5.0.0"
     prop-types "^15.5.4"
     react-is "^16.6.0"
     stylis "^3.5.0"
@@ -2713,6 +2939,13 @@ supports-color@^5.3.0, supports-color@^5.5.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 tar@^4:
   version "4.4.8"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.8.tgz#b19eec3fde2a96e64666df9fdb40c5ca1bc3747d"
@@ -2776,10 +3009,10 @@ typelevel-ts@0.3.4:
   resolved "https://registry.yarnpkg.com/typelevel-ts/-/typelevel-ts-0.3.4.tgz#12593629dd7515f06ef9efc9930d683c51233654"
   integrity sha512-Np19x563BJZ1ZI0R2LVQQ9LSyMLsk0wBLF+kd6g3mDPmCtqK0IKwzAze/ChEtFNNS810dalTaUCFG2uBrk7XXQ==
 
-typescript@3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"
-  integrity sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==
+typescript@3.3.4000:
+  version "3.3.4000"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.4000.tgz#76b0f89cfdbf97827e1112d64f283f1151d6adf0"
+  integrity sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA==
 
 ua-parser-js@^0.7.18:
   version "0.7.19"
@@ -2804,6 +3037,11 @@ unicode-match-property-value-ecmascript@^1.0.2:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.0.2.tgz#9f1dc76926d6ccf452310564fd834ace059663d4"
   integrity sha512-Rx7yODZC1L/T8XKo/2kNzVAQaRE88AaMvI1EF/Xnj3GW2wzN6fop9DDWuFAKUVFH7vozkz26DzP0qyWLKLIVPQ==
 
+unicode-match-property-value-ecmascript@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
+  integrity sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==
+
 unicode-property-aliases-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"