diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
index b59ed489896dde..68af407a4d8a5e 100644
--- a/apps/todo-app/package.json
+++ b/apps/todo-app/package.json
@@ -23,7 +23,7 @@
     "office-ui-fabric-react": ">=6.37.0 <7.0.0",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
-    "typescript": "2.8.1",
+    "typescript": "2.8.4",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 962a5eea4d3b25..9068e64ce39657 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -32,7 +32,7 @@
     "office-ui-fabric-react": ">=6.37.0 <7.0.0",
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0",
-    "typescript": "2.8.1",
+    "typescript": "2.8.4",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/common/changes/@uifabric/charting/backout-change_2018-07-13-19-36.json b/common/changes/@uifabric/charting/backout-change_2018-07-13-19-36.json
deleted file mode 100644
index 8a9ca701b23eee..00000000000000
--- a/common/changes/@uifabric/charting/backout-change_2018-07-13-19-36.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/charting",
-      "comment": "Reverting the TypeScript bump, to un",
-      "type": "minor"
-    }
-  ],
-  "packageName": "@uifabric/charting",
-  "email": "dzearing@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json b/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
new file mode 100644
index 00000000000000..80aa1bf6ea8699
--- /dev/null
+++ b/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/charting",
+      "comment": "Update typings to not use deprecated types.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/charting",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json b/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
new file mode 100644
index 00000000000000..808ce47c96a9c1
--- /dev/null
+++ b/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/example-app-base",
+      "comment": "Fix typing bugs in example-app-base",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json b/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json
new file mode 100644
index 00000000000000..2a7a10a3751362
--- /dev/null
+++ b/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Fix typing errors",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 00000000000000..ac9d953d69cca2
--- /dev/null
+++ b/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Add support for style functions and improve documentation/typings.",
+      "packageName": "@uifabric/merge-styles",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 00000000000000..8d36f5e6a76c33
--- /dev/null
+++ b/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "Move certain types into `@uifabric/merge-styles` and export more types as well from that package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 00000000000000..538061f09bc150
--- /dev/null
+++ b/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Tighten typings of APIs around merge-styles to be more correct",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
new file mode 100644
index 00000000000000..50812b99e4d05e
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix various typings/code bugs.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "cliff.koh@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
index eff2ab5c914390..61f6ea3176df60 100644
--- a/common/config/rush/npm-shrinkwrap.json
+++ b/common/config/rush/npm-shrinkwrap.json
@@ -5,23 +5,28 @@
   "requires": true,
   "dependencies": {
     "@babel/code-frame": {
-      "version": "7.0.0-beta.53",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.53.tgz",
-      "integrity": "sha1-mA0VYLhjV1v1o3eSUDfgEy71kh4=",
+      "version": "7.0.0-beta.54",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.54.tgz",
+      "integrity": "sha1-ACT5b99wKKIdaOJzr9TpUyFKHq0=",
       "requires": {
-        "@babel/highlight": "7.0.0-beta.53"
+        "@babel/highlight": "7.0.0-beta.54"
       }
     },
     "@babel/highlight": {
-      "version": "7.0.0-beta.53",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.53.tgz",
-      "integrity": "sha1-9OlS2tF4fSBeGI0+OEzc5JyjaPs=",
+      "version": "7.0.0-beta.54",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.54.tgz",
+      "integrity": "sha1-FV1Qc1gym45waJcAF8P9dKmwhYQ=",
       "requires": {
         "chalk": "2.4.1",
         "esutils": "2.0.2",
         "js-tokens": "3.0.2"
       }
     },
+    "@babel/parser": {
+      "version": "7.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.53.tgz",
+      "integrity": "sha1-H0XrYXv5Rj1IKywE00nZ5O2/SJI="
+    },
     "@microsoft/api-extractor": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-4.3.7.tgz",
@@ -53,16 +58,16 @@
       }
     },
     "@microsoft/load-themed-styles": {
-      "version": "1.7.68",
-      "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.68.tgz",
-      "integrity": "sha1-0LecUgP/Sy3SeHUNxXQ8roI70v4="
+      "version": "1.7.69",
+      "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.69.tgz",
+      "integrity": "sha1-S1Yze6wLXsIuTmB0edB/nVXSHfM="
     },
     "@microsoft/loader-load-themed-styles": {
-      "version": "1.7.51",
-      "resolved": "https://registry.npmjs.org/@microsoft/loader-load-themed-styles/-/loader-load-themed-styles-1.7.51.tgz",
-      "integrity": "sha1-ndGg63FI/NmZc+gbhJYiouRBT/U=",
+      "version": "1.7.52",
+      "resolved": "https://registry.npmjs.org/@microsoft/loader-load-themed-styles/-/loader-load-themed-styles-1.7.52.tgz",
+      "integrity": "sha1-NRnkyh6DLO+SP8hB1Z5JUfp4ON4=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "loader-utils": "1.1.0"
       }
     },
@@ -120,11 +125,11 @@
     },
     "@rush-temp/build": {
       "version": "file:projects/build.tgz",
-      "integrity": "sha1-sXFV09AzESu1p4xQBH1kQ46uaQU=",
+      "integrity": "sha1-d4kjYQ/z3Mhw4hZyvT3LKy0iGdE=",
       "requires": {
         "@microsoft/api-extractor": "4.3.7",
-        "@microsoft/load-themed-styles": "1.7.68",
-        "@microsoft/loader-load-themed-styles": "1.7.51",
+        "@microsoft/load-themed-styles": "1.7.69",
+        "@microsoft/loader-load-themed-styles": "1.7.52",
         "autoprefixer": "7.2.6",
         "bundlesize": "0.15.3",
         "chalk": "2.4.1",
@@ -152,9 +157,9 @@
         "style-loader": "0.19.1",
         "ts-jest": "22.4.6",
         "ts-loader": "4.4.2",
-        "tslint": "5.10.0",
+        "tslint": "5.11.0",
         "tslint-microsoft-contrib": "5.0.3",
-        "typescript": "2.8.1",
+        "typescript": "2.8.4",
         "webpack": "4.7.0",
         "webpack-bundle-analyzer": "2.13.1",
         "webpack-cli": "2.1.2",
@@ -618,7 +623,7 @@
             "v8-compile-cache": "1.1.2",
             "webpack-addons": "1.1.5",
             "yargs": "11.1.0",
-            "yeoman-environment": "2.3.0",
+            "yeoman-environment": "2.3.1",
             "yeoman-generator": "2.0.5"
           },
           "dependencies": {
@@ -652,7 +657,7 @@
             "array-includes": "3.0.3",
             "bonjour": "3.5.0",
             "chokidar": "2.0.4",
-            "compression": "1.7.2",
+            "compression": "1.7.3",
             "connect-history-api-fallback": "1.5.0",
             "debug": "3.1.0",
             "del": "3.0.0",
@@ -724,9 +729,9 @@
     },
     "@rush-temp/charting": {
       "version": "file:projects/charting.tgz",
-      "integrity": "sha1-pFfGnH6Lcd4FQr8DSVqQEOIeej4=",
+      "integrity": "sha1-Y2Qn54RZSotYFF+5XFXOs7L87bg=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/d3-array": "1.2.1",
         "@types/d3-axis": "1.0.10",
         "@types/d3-scale": "2.0.0",
@@ -761,16 +766,15 @@
     },
     "@rush-temp/dashboard": {
       "version": "file:projects/dashboard.tgz",
-      "integrity": "sha1-JojQPVwAuBn/OgYj54ijMcKyJfU=",
+      "integrity": "sha1-YflY2QkeXO25uV4DJzur0QrhNsY=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/jest": "23.0.0",
         "@types/react": "16.3.16",
         "@types/react-dom": "16.0.5",
         "@types/react-grid-layout": "0.16.4",
         "@types/react-test-renderer": "16.0.1",
         "@types/webpack-env": "1.13.0",
-        "@uifabric/charting": "0.0.4",
         "css-loader": "0.15.6",
         "react": "16.4.1",
         "react-dom": "16.4.1",
@@ -1139,9 +1143,9 @@
     },
     "@rush-temp/example-app-base": {
       "version": "file:projects/example-app-base.tgz",
-      "integrity": "sha1-3SfzxeKLbBqCFRitsAfHSvogF/g=",
+      "integrity": "sha1-R0XenOD0K1+h5IRmWqoDYLAdh+o=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/es6-promise": "0.0.32",
         "@types/highlight.js": "9.12.2",
         "@types/react": "16.3.16",
@@ -1160,9 +1164,9 @@
     },
     "@rush-temp/experiments": {
       "version": "file:projects/experiments.tgz",
-      "integrity": "sha1-dKbRCNfWjqo4+hmbUXIncD64snE=",
+      "integrity": "sha1-Q0elKqTHYubL4lS8KuQhbTOrNnc=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/deep-assign": "0.1.1",
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
@@ -1176,7 +1180,6 @@
         "@types/resemblejs": "1.3.28",
         "@types/sinon": "2.2.2",
         "@types/webpack-env": "1.13.0",
-        "@uifabric/charting": "0.0.4",
         "deep-assign": "2.0.0",
         "enzyme": "3.3.0",
         "enzyme-adapter-react-16": "1.1.1",
@@ -1192,9 +1195,9 @@
     },
     "@rush-temp/fabric-website": {
       "version": "file:projects/fabric-website.tgz",
-      "integrity": "sha1-b0hYaHzYMA4jFK5lLkeLOggzjiw=",
+      "integrity": "sha1-QmW5Q4N4Pch4Qm8u355xWMoleMQ=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/es6-promise": "0.0.32",
         "@types/node": "8.0.26",
         "@types/prop-types": "15.5.2",
@@ -1202,7 +1205,6 @@
         "@types/react-dom": "16.0.5",
         "@types/resemblejs": "1.3.28",
         "@types/webpack-env": "1.13.0",
-        "@uifabric/example-app-base": "5.11.6",
         "color-functions": "1.1.0",
         "es6-promise": "4.2.4",
         "es6-weak-map": "2.0.2",
@@ -1218,9 +1220,9 @@
     },
     "@rush-temp/fabric-website-resources": {
       "version": "file:projects/fabric-website-resources.tgz",
-      "integrity": "sha1-68y8MdvwGuBgATz29Iin10/vAfg=",
+      "integrity": "sha1-VehbxIOSpTKQ9UVkik0Aa0ZPM38=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
         "@types/es6-promise": "0.0.32",
@@ -1252,7 +1254,7 @@
     },
     "@rush-temp/file-type-icons": {
       "version": "file:projects/file-type-icons.tgz",
-      "integrity": "sha1-XjgSl5H2msLk7F27JAz6PW6fons=",
+      "integrity": "sha1-+wc/Lv9QhhwHFzIbN82IQSd1iQY=",
       "requires": {
         "@types/react": "16.3.16",
         "@types/react-dom": "16.0.5",
@@ -1263,7 +1265,7 @@
     },
     "@rush-temp/foundation": {
       "version": "file:projects/foundation.tgz",
-      "integrity": "sha1-iAD6VdSzK2nzALhJnLtE/ns3qoY=",
+      "integrity": "sha1-Xi3qhtVegaBOqSffVSvX2kE26HU=",
       "requires": {
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
@@ -1283,21 +1285,21 @@
     },
     "@rush-temp/icons": {
       "version": "file:projects/icons.tgz",
-      "integrity": "sha1-5zAC2weSWmgDLI/9MMP3VlFjSVw=",
+      "integrity": "sha1-iPfy+WvtBcBZ2LyjxxSGVasC8vw=",
       "requires": {
         "tslib": "1.9.3"
       }
     },
     "@rush-temp/jest-serializer-merge-styles": {
       "version": "file:projects/jest-serializer-merge-styles.tgz",
-      "integrity": "sha1-ZN6R4piHHeX2L54uQQ/uOYZM2ks=",
+      "integrity": "sha1-MbuQOEKGbguTODtN88o8HQafOBY=",
       "requires": {
         "@types/jest": "23.0.0"
       }
     },
     "@rush-temp/merge-styles": {
       "version": "file:projects/merge-styles.tgz",
-      "integrity": "sha1-CEII6GdF9wF40gLuW3kw5d3RWok=",
+      "integrity": "sha1-BxfGzGPwLohnD9O6BOE2yW1P81E=",
       "requires": {
         "@types/jest": "23.0.0",
         "tslib": "1.9.3"
@@ -1305,9 +1307,9 @@
     },
     "@rush-temp/office-ui-fabric-react": {
       "version": "file:projects/office-ui-fabric-react.tgz",
-      "integrity": "sha1-zHPMwO1G3pASVF7LUGGT4DxTh+I=",
+      "integrity": "sha1-aN2N4RIhXlZhd3ftOfdC/upAN9g=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
         "@types/es6-promise": "0.0.32",
@@ -1339,21 +1341,21 @@
     },
     "@rush-temp/office-ui-fabric-react-tslint": {
       "version": "file:projects/office-ui-fabric-react-tslint.tgz",
-      "integrity": "sha1-dNIEVGZsEffaI738hnmJnh3CeU8=",
+      "integrity": "sha1-j51VsUKJRraDK0qESWx0ImpSLGM=",
       "requires": {
         "tslint-react": "3.6.0"
       }
     },
     "@rush-temp/server-rendered-app": {
       "version": "file:projects/server-rendered-app.tgz",
-      "integrity": "sha1-XISDZWwL4u7HEIW4ridBX3T6AG4=",
+      "integrity": "sha1-3dgScHLfXWJDaEcWGzUbnpAt5Q0=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/es6-promise": "0.0.32",
         "@types/react": "16.3.16",
         "@types/react-dom": "16.0.5",
         "@types/webpack-env": "1.13.0",
-        "compression": "1.7.2",
+        "compression": "1.7.3",
         "es6-promise": "4.2.4",
         "express": "4.16.3",
         "immutability-helper": "2.7.1",
@@ -1364,9 +1366,9 @@
     },
     "@rush-temp/ssr-tests": {
       "version": "file:projects/ssr-tests.tgz",
-      "integrity": "sha1-PSyuoMl/vKg3FcDeYQ0xSEwX1fM=",
+      "integrity": "sha1-Obv4QNzVgyHzzlulKMSrb3TaVg8=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/es6-promise": "0.0.32",
         "@types/mocha": "2.2.39",
         "@types/webpack-env": "1.13.0",
@@ -1376,7 +1378,7 @@
         "react": "16.4.1",
         "react-dom": "16.4.1",
         "tslib": "1.9.3",
-        "webpack": "4.16.0"
+        "webpack": "4.16.1"
       },
       "dependencies": {
         "ajv": {
@@ -1443,6 +1445,15 @@
             "ms": "2.0.0"
           }
         },
+        "eslint-scope": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
+          "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
+          "requires": {
+            "esrecurse": "4.2.1",
+            "estraverse": "4.2.0"
+          }
+        },
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -1665,9 +1676,9 @@
           }
         },
         "webpack": {
-          "version": "4.16.0",
-          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.0.tgz",
-          "integrity": "sha512-oNx9djAd6uAcccyfqN3hyXLNMjZHiRySZmBQ4c8FNmf1SNJGhx7n9TSvHNyXxgToRdH65g/Q97s94Ip9N6F7xg==",
+          "version": "4.16.1",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.1.tgz",
+          "integrity": "sha512-6jpzObU18y7lXDJz7XCLvzgrqcJ0rZ2jhKvnTivza9gM2GvPW93xxtmEll2GgmdC0zVQAtbHrH/9BtyMjSDZfA==",
           "requires": {
             "@webassemblyjs/ast": "1.5.13",
             "@webassemblyjs/helper-module-context": "1.5.13",
@@ -1680,7 +1691,7 @@
             "ajv-keywords": "3.2.0",
             "chrome-trace-event": "1.0.0",
             "enhanced-resolve": "4.1.0",
-            "eslint-scope": "3.7.3",
+            "eslint-scope": "4.0.0",
             "json-parse-better-errors": "1.0.2",
             "loader-runner": "2.3.0",
             "loader-utils": "1.1.0",
@@ -1700,9 +1711,9 @@
     },
     "@rush-temp/styling": {
       "version": "file:projects/styling.tgz",
-      "integrity": "sha1-u1Ou2Haw5+eIn3ePkITmBOXw/40=",
+      "integrity": "sha1-hM3QHqzcvspReFxpAi+JqCyQWqU=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/jest": "23.0.0",
         "@types/react": "16.3.16",
         "@types/webpack-env": "1.13.0",
@@ -1715,7 +1726,7 @@
     },
     "@rush-temp/test-bundle-button": {
       "version": "file:projects/test-bundle-button.tgz",
-      "integrity": "sha1-oDE8StA+ZIyXVo9PSDrgeZ6QMxw=",
+      "integrity": "sha1-qSYJix5U2lzSHNusOJ9WaKGw7Ac=",
       "requires": {
         "@types/prop-types": "15.5.2",
         "@types/react": "16.3.16",
@@ -1728,9 +1739,9 @@
     },
     "@rush-temp/todo-app": {
       "version": "file:projects/todo-app.tgz",
-      "integrity": "sha1-WOLJfWmxqMTkLQ4jADCxyZExeQg=",
+      "integrity": "sha1-nqHmTFi0qSt/XEsEe/6AKwXJQpg=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
+        "@microsoft/load-themed-styles": "1.7.69",
         "@types/es6-promise": "0.0.32",
         "@types/react": "16.3.16",
         "@types/react-dom": "16.0.5",
@@ -1740,12 +1751,12 @@
         "react": "16.4.1",
         "react-dom": "16.4.1",
         "tslib": "1.9.3",
-        "typescript": "2.8.1"
+        "typescript": "2.8.4"
       }
     },
     "@rush-temp/utilities": {
       "version": "file:projects/utilities.tgz",
-      "integrity": "sha1-/vy7H1eoe0k9HR0/MM/us0fpJ0M=",
+      "integrity": "sha1-Su3s564PRbN2MB+e+mc0eNFFEoo=",
       "requires": {
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
@@ -1767,7 +1778,7 @@
     },
     "@rush-temp/variants": {
       "version": "file:projects/variants.tgz",
-      "integrity": "sha1-+13ohVe7RzsN7q5Vxku3UFW9UwQ=",
+      "integrity": "sha1-9EJRO7VFKGYXy31Zxo2wmqYmHRo=",
       "requires": {
         "@types/jest": "23.0.0",
         "tslib": "1.9.3"
@@ -1775,7 +1786,7 @@
     },
     "@rush-temp/vr-tests": {
       "version": "file:projects/vr-tests.tgz",
-      "integrity": "sha1-ZGqj+pI0+8Z4TtRahLKabj/dZeE=",
+      "integrity": "sha1-kpFcdnMZxVOH/2MLIMDDRs4jakE=",
       "requires": {
         "@storybook/addon-options": "3.2.3",
         "@storybook/react": "3.4.8",
@@ -1794,19 +1805,19 @@
         "storybook-readme": "3.0.6",
         "style-loader": "0.19.1",
         "tslib": "1.9.3",
-        "typescript": "2.8.1"
+        "typescript": "2.8.4"
       }
     },
     "@rush-temp/webpack-utils": {
       "version": "file:projects/webpack-utils.tgz",
-      "integrity": "sha1-N/fEmG4uokDF+Uu/pZtT/BqdKQI=",
+      "integrity": "sha1-sDlNvDTRIRrHno/qQ5E10NC1QvQ=",
       "requires": {
         "@types/jest": "23.0.0",
         "@types/loader-utils": "1.1.3",
         "@types/webpack": "4.4.0",
         "loader-utils": "1.1.0",
         "tslib": "1.9.3",
-        "webpack": "4.16.0"
+        "webpack": "4.16.1"
       },
       "dependencies": {
         "ajv": {
@@ -1873,6 +1884,15 @@
             "ms": "2.0.0"
           }
         },
+        "eslint-scope": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
+          "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
+          "requires": {
+            "esrecurse": "4.2.1",
+            "estraverse": "4.2.0"
+          }
+        },
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -2095,9 +2115,9 @@
           }
         },
         "webpack": {
-          "version": "4.16.0",
-          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.0.tgz",
-          "integrity": "sha512-oNx9djAd6uAcccyfqN3hyXLNMjZHiRySZmBQ4c8FNmf1SNJGhx7n9TSvHNyXxgToRdH65g/Q97s94Ip9N6F7xg==",
+          "version": "4.16.1",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.16.1.tgz",
+          "integrity": "sha512-6jpzObU18y7lXDJz7XCLvzgrqcJ0rZ2jhKvnTivza9gM2GvPW93xxtmEll2GgmdC0zVQAtbHrH/9BtyMjSDZfA==",
           "requires": {
             "@webassemblyjs/ast": "1.5.13",
             "@webassemblyjs/helper-module-context": "1.5.13",
@@ -2110,7 +2130,7 @@
             "ajv-keywords": "3.2.0",
             "chrome-trace-event": "1.0.0",
             "enhanced-resolve": "4.1.0",
-            "eslint-scope": "3.7.3",
+            "eslint-scope": "4.0.0",
             "json-parse-better-errors": "1.0.2",
             "loader-runner": "2.3.0",
             "loader-utils": "1.1.0",
@@ -2243,7 +2263,7 @@
         "url-loader": "0.6.2",
         "webpack": "3.11.0",
         "webpack-dev-middleware": "1.12.2",
-        "webpack-hot-middleware": "2.22.2"
+        "webpack-hot-middleware": "2.22.3"
       },
       "dependencies": {
         "events": {
@@ -2353,7 +2373,7 @@
         "uglifyjs-webpack-plugin": "1.2.7",
         "util-deprecate": "1.0.2",
         "webpack": "3.11.0",
-        "webpack-hot-middleware": "2.22.2"
+        "webpack-hot-middleware": "2.22.3"
       }
     },
     "@storybook/react-komposer": {
@@ -2626,132 +2646,6 @@
       "resolved": "https://registry.npmjs.org/@types/z-schema/-/z-schema-3.16.31.tgz",
       "integrity": "sha1-LrHQCl5Ow/pYx2r94S4YK2bcXBw="
     },
-    "@uifabric/charting": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/@uifabric/charting/-/charting-0.0.4.tgz",
-      "integrity": "sha512-oVJXxP4g1tfqHea2lCkbYXQjF4f9h20qIaTtF75iJqvG42rm1vl+a91bdsb1kFC7YM7K3qmM1M/IQFQuvbNG8A==",
-      "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
-        "@types/d3-array": "1.2.1",
-        "@types/d3-axis": "1.0.10",
-        "@types/d3-scale": "2.0.0",
-        "@types/d3-selection": "1.3.0",
-        "@uifabric/icons": "6.0.2",
-        "d3-array": "1.2.1",
-        "d3-axis": "1.0.8",
-        "d3-scale": "2.0.0",
-        "d3-selection": "1.3.0",
-        "office-ui-fabric-react": "6.35.0",
-        "prop-types": "15.6.2",
-        "tslib": "1.9.3"
-      }
-    },
-    "@uifabric/example-app-base": {
-      "version": "5.11.6",
-      "resolved": "https://registry.npmjs.org/@uifabric/example-app-base/-/example-app-base-5.11.6.tgz",
-      "integrity": "sha512-mmb6PhDms7+ltjdIzNvl7tbQG2bV5mVfA2Dk2RYzySr8S5LYmi3ZVT2+L4NPIC/s2C09DsA7XGCIox+MVcIWWg==",
-      "requires": {
-        "@uifabric/styling": "5.31.1",
-        "@uifabric/utilities": "5.34.1",
-        "highlight.js": "9.12.0",
-        "markdown-to-jsx": "6.6.1",
-        "office-ui-fabric-react": "5.115.0",
-        "react-syntax-highlighter": "7.0.4",
-        "tslib": "1.9.3"
-      },
-      "dependencies": {
-        "@uifabric/icons": {
-          "version": "5.8.0",
-          "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.8.0.tgz",
-          "integrity": "sha512-EUhKxYlIPJshg4fQvCNTYSk0p7RhzEWeEAJBV4sao1SKmN0/pZBnkLbDqWjU5VUfdwZZYiIdaLRpM+pyzhniZw==",
-          "requires": {
-            "@uifabric/styling": "5.31.1",
-            "tslib": "1.9.3"
-          }
-        },
-        "@uifabric/merge-styles": {
-          "version": "5.17.1",
-          "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
-          "integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
-          "requires": {
-            "tslib": "1.9.3"
-          }
-        },
-        "@uifabric/styling": {
-          "version": "5.31.1",
-          "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.31.1.tgz",
-          "integrity": "sha512-WqMyozBkjTOPiIcyHavaFOXqwGjC0+vdcAyR7RTFEo2ZFgpjYm0+bAd+o6X4pdYFKVa72FbFx7JxnJUUI5CGsA==",
-          "requires": {
-            "@microsoft/load-themed-styles": "1.7.68",
-            "@uifabric/merge-styles": "5.17.1",
-            "@uifabric/utilities": "5.34.1",
-            "tslib": "1.9.3"
-          }
-        },
-        "@uifabric/utilities": {
-          "version": "5.34.1",
-          "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.1.tgz",
-          "integrity": "sha512-xUZ+KlCxmA9PCEOtutfeyYnPmySkEVA/ak3fb8Uj54684GlbrnlqrfNEencVG5YgQDcNEaztTwxW3I7jSCrYJQ==",
-          "requires": {
-            "@uifabric/merge-styles": "5.17.1",
-            "prop-types": "15.6.2",
-            "tslib": "1.9.3"
-          }
-        },
-        "office-ui-fabric-react": {
-          "version": "5.115.0",
-          "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.115.0.tgz",
-          "integrity": "sha512-VJl9WmEjDcBUu8YuDNlu4DBpBiqJVZMX8SLycuW2Wh2kjdAq2YBcAEZ2rGDoen2Rch/DgIG88wUiDLiBgq56YQ==",
-          "requires": {
-            "@microsoft/load-themed-styles": "1.7.68",
-            "@uifabric/icons": "5.8.0",
-            "@uifabric/merge-styles": "5.17.1",
-            "@uifabric/styling": "5.31.1",
-            "@uifabric/utilities": "5.34.1",
-            "prop-types": "15.6.2",
-            "tslib": "1.9.3"
-          }
-        }
-      }
-    },
-    "@uifabric/icons": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-6.0.2.tgz",
-      "integrity": "sha512-M8xfGdxEOUQJ8XQnviFFvystaiy1Ox08ml1WVw+IWhycG7s6eh/vy/WU5kYlECCHcDmGGR0laGT5Jd60Jrfdsg==",
-      "requires": {
-        "@uifabric/styling": "6.8.0",
-        "tslib": "1.9.3"
-      }
-    },
-    "@uifabric/merge-styles": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.4.0.tgz",
-      "integrity": "sha512-/gRAaUcj5HfQdiPbXXy4FQST1Q9/5qug+4pj7EDc8mbWRsVoTgjiFmA7RKhVd3nvxj53gR8suJyx3i1uNgc/Ng==",
-      "requires": {
-        "tslib": "1.9.3"
-      }
-    },
-    "@uifabric/styling": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.8.0.tgz",
-      "integrity": "sha512-fkPEtX5i49TkJnXepWWIU4tLgp/5kiVXLfvKUsX0CF0zES2061rv+a49ZQSdXQQmhvhhocHrr+GFMcowl1epqA==",
-      "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
-        "@uifabric/merge-styles": "6.4.0",
-        "@uifabric/utilities": "6.9.0",
-        "tslib": "1.9.3"
-      }
-    },
-    "@uifabric/utilities": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.9.0.tgz",
-      "integrity": "sha512-xQW33qojXewFd3HgfuL6fB+uAU94w3PddjbFNjgCkkPpwdygbWv/HHcm9gtf29tlJQxy9vJA0iiOqd4HDZCEgA==",
-      "requires": {
-        "@uifabric/merge-styles": "6.4.0",
-        "prop-types": "15.6.2",
-        "tslib": "1.9.3"
-      }
-    },
     "@webassemblyjs/ast": {
       "version": "1.5.13",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.13.tgz",
@@ -3367,7 +3261,7 @@
       "integrity": "sha1-5kDEFK5Bmq4hwa1DyOoPPbgqVm0=",
       "requires": {
         "browserslist": "0.4.0",
-        "caniuse-db": "1.0.30000865",
+        "caniuse-db": "1.0.30000867",
         "num2fraction": "1.2.2",
         "postcss": "4.1.16"
       },
@@ -3377,7 +3271,7 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-0.4.0.tgz",
           "integrity": "sha1-O9SrkZncG5FQ1NbbpNnTqrvIbdQ=",
           "requires": {
-            "caniuse-db": "1.0.30000865"
+            "caniuse-db": "1.0.30000867"
           }
         },
         "es6-promise": {
@@ -4198,7 +4092,7 @@
       "requires": {
         "babel-types": "6.26.0",
         "lodash": "4.17.10",
-        "react-docgen": "3.0.0-beta9"
+        "react-docgen": "3.0.0-rc.0"
       },
       "dependencies": {
         "lodash": {
@@ -5602,7 +5496,7 @@
       "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000865",
+        "caniuse-db": "1.0.30000867",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       },
@@ -5612,16 +5506,16 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000865",
+            "caniuse-db": "1.0.30000867",
             "electron-to-chromium": "1.3.52"
           }
         }
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000865",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000865.tgz",
-      "integrity": "sha1-gv+2TUD3VnYgqsAtOmMgeWiavGs="
+      "version": "1.0.30000867",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000867.tgz",
+      "integrity": "sha1-tVpuz6wxB5iJQMnH3+GGYxUxLJc="
     },
     "caniuse-lite": {
       "version": "1.0.30000865",
@@ -6098,27 +5992,27 @@
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.14.tgz",
       "integrity": "sha1-MmxfUH+7BV9UEWeCuWmoG2einac=",
       "requires": {
-        "mime-db": "1.34.0"
+        "mime-db": "1.35.0"
       },
       "dependencies": {
         "mime-db": {
-          "version": "1.34.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.34.0.tgz",
-          "integrity": "sha1-RS0Oz/XDA0am3B5kseruDTcZ/5o="
+          "version": "1.35.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.35.0.tgz",
+          "integrity": "sha512-JWT/IcCTsB0Io3AhWUMjRqucrHSPsSf2xKLaRldJVULioggvkJvggZ3VXNNSRkCddE6D+BUI4HEIZIA2OjwIvg=="
         }
       }
     },
     "compression": {
-      "version": "1.7.2",
-      "resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
-      "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.3.tgz",
+      "integrity": "sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==",
       "requires": {
         "accepts": "1.3.5",
         "bytes": "3.0.0",
         "compressible": "2.0.14",
         "debug": "2.6.9",
         "on-headers": "1.0.1",
-        "safe-buffer": "5.1.1",
+        "safe-buffer": "5.1.2",
         "vary": "1.1.2"
       },
       "dependencies": {
@@ -6129,11 +6023,6 @@
           "requires": {
             "ms": "2.0.0"
           }
-        },
-        "safe-buffer": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
         }
       }
     },
@@ -6493,7 +6382,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -6669,7 +6558,7 @@
           "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
           "requires": {
             "browserslist": "1.7.7",
-            "caniuse-db": "1.0.30000865",
+            "caniuse-db": "1.0.30000867",
             "normalize-range": "0.1.2",
             "num2fraction": "1.2.2",
             "postcss": "5.2.18",
@@ -6681,7 +6570,7 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000865",
+            "caniuse-db": "1.0.30000867",
             "electron-to-chromium": "1.3.52"
           }
         },
@@ -6715,7 +6604,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -7666,9 +7555,9 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.10.0.tgz",
-      "integrity": "sha512-fjUOf8johsv23WuIKdNQU4P9t9jhQ4Qzx6pC2uW890OloK3Zs1ZAoCNpg/2larNF501jLl3UNy0kIRcF6VI22g==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.0.tgz",
+      "integrity": "sha512-IeMV45ReixHS53K/OmfKAIztN/igDHzTJUhZM3k1jMhIZWjk45SMwAtBsEXiJp3vSPmTcu6CXn7mDvFHRN66fw==",
       "requires": {
         "esprima": "3.1.3",
         "estraverse": "4.2.0",
@@ -9274,9 +9163,9 @@
       }
     },
     "hast-util-parse-selector": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.1.1.tgz",
-      "integrity": "sha512-FlrdvixBzVHYSqtvGAl0wjH1hiCY5NEfs+zfFNAZNWKMVj4pH6x+uPPyrhvzU3NrwOqYVX6Essv4d5n+0b6faA=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.0.tgz",
+      "integrity": "sha512-trw0pqZN7+sH9k7hPWCJNZUbWW2KroSIM/XpIy3G5ZMtx9LSabCyoSp4skJZ4q/eZ5UOBPtvWh4W9c+RE3HRoQ=="
     },
     "hastscript": {
       "version": "3.1.0",
@@ -9285,7 +9174,7 @@
       "requires": {
         "camelcase": "3.0.0",
         "comma-separated-tokens": "1.0.5",
-        "hast-util-parse-selector": "2.1.1",
+        "hast-util-parse-selector": "2.2.0",
         "property-information": "3.2.0",
         "space-separated-tokens": "1.1.2"
       },
@@ -9417,13 +9306,13 @@
         "he": "1.1.1",
         "param-case": "2.1.1",
         "relateurl": "0.2.7",
-        "uglify-js": "3.4.4"
+        "uglify-js": "3.4.5"
       },
       "dependencies": {
         "uglify-js": {
-          "version": "3.4.4",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.4.tgz",
-          "integrity": "sha512-RiB1kNcC9RMyqwRrjXC+EjgLoXULoDnCaOnEDzUCHkBN0bHwmtF5rzDMiDWU29gu0kXCRRWwtcTAVFWRECmU2Q==",
+          "version": "3.4.5",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.5.tgz",
+          "integrity": "sha512-Fm52gLqJqFBnT+Sn411NPDnsgaWiYeRLw42x7Va/mS8TKgaepwoGY7JLXHSEef3d3PmdFXSz1Zx7KMLL89E2QA==",
           "requires": {
             "commander": "2.16.0",
             "source-map": "0.6.1"
@@ -10799,7 +10688,7 @@
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
       "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
       "requires": {
-        "@babel/code-frame": "7.0.0-beta.53",
+        "@babel/code-frame": "7.0.0-beta.54",
         "chalk": "2.4.1",
         "micromatch": "2.3.11",
         "slash": "1.0.0",
@@ -11014,9 +10903,9 @@
       }
     },
     "js-base64": {
-      "version": "2.4.6",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.6.tgz",
-      "integrity": "sha512-O9SR2NVICx6rCqh1qsU91QZ5IoNa+2T1ROJ0OQlfvATKGmnjsAvg3r0E5ufPZ4a95jdKTPXhFWiE/sOZ7a5Rtg=="
+      "version": "2.4.8",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.8.tgz",
+      "integrity": "sha512-hm2nYpDrwoO/OzBhdcqs/XGT6XjSuSSCVEpia+Kl2J6x4CYt5hISlVL/AYU1khoDXv0AQVgxtdJySb9gjAn56Q=="
     },
     "js-tokens": {
       "version": "3.0.2",
@@ -11084,7 +10973,7 @@
         "cssstyle": "0.3.1",
         "data-urls": "1.0.0",
         "domexception": "1.0.1",
-        "escodegen": "1.10.0",
+        "escodegen": "1.11.0",
         "html-encoding-sniffer": "1.0.2",
         "left-pad": "1.3.0",
         "nwsapi": "2.0.5",
@@ -11233,9 +11122,9 @@
       }
     },
     "kleur": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-1.0.1.tgz",
-      "integrity": "sha512-8srIZ5BK5PCJw1L/JN741xgNfSjuQNK9ImYbYzv7ZUD3WPfuywaY+yd7lQOphJ+2vwXnMLnRZoAh5X+orRt4LQ=="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-1.0.2.tgz",
+      "integrity": "sha512-4u2TF1/mKmiawrkjzCxRKszdCvqRsPgTJwjmZZt0RE4OiZMzvFfb4kwqfFP/p0gvakH1lhQOfCMYXUOYI9dTgA=="
     },
     "lazy-cache": {
       "version": "1.0.4",
@@ -13064,20 +12953,6 @@
       "resolved": "https://registry.npmjs.org/office-ui-fabric-core/-/office-ui-fabric-core-9.6.0.tgz",
       "integrity": "sha1-KhZgU8ye+wlWUGPn/Td8yKywNBw="
     },
-    "office-ui-fabric-react": {
-      "version": "6.35.0",
-      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.35.0.tgz",
-      "integrity": "sha512-YcrdLz9nHIsg1UARTUKEwiHyeKs9HujooWGUjxkjRA4dgh8h3We4pH7yZVtVFfkqtd16e/6FMAJ5oNPLYAbxqg==",
-      "requires": {
-        "@microsoft/load-themed-styles": "1.7.68",
-        "@uifabric/icons": "6.0.2",
-        "@uifabric/merge-styles": "6.4.0",
-        "@uifabric/styling": "6.8.0",
-        "@uifabric/utilities": "6.9.0",
-        "prop-types": "15.6.2",
-        "tslib": "1.9.3"
-      }
-    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -13630,7 +13505,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13695,7 +13570,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13759,7 +13634,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13822,7 +13697,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13885,7 +13760,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -13948,7 +13823,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14011,7 +13886,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14075,7 +13950,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14138,7 +14013,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14276,7 +14151,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14339,7 +14214,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14381,7 +14256,7 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000865",
+            "caniuse-db": "1.0.30000867",
             "electron-to-chromium": "1.3.52"
           }
         },
@@ -14415,7 +14290,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14485,7 +14360,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14587,7 +14462,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14653,7 +14528,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14719,7 +14594,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14828,7 +14703,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14894,7 +14769,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -14958,7 +14833,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15022,7 +14897,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15085,7 +14960,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15150,7 +15025,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15275,7 +15150,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15340,7 +15215,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15410,7 +15285,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.6",
+            "js-base64": "2.4.8",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -15561,7 +15436,7 @@
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.12.tgz",
       "integrity": "sha512-pgR1GE1JM8q8UsHVIgjdK62DPwvrf0kvaKWJ/mfMoCm2lwfIReX/giQ1p0AlMoUXNhQap/8UiOdqi3bOROm/eg==",
       "requires": {
-        "kleur": "1.0.1",
+        "kleur": "1.0.2",
         "sisteransi": "0.1.1"
       }
     },
@@ -15946,34 +15821,19 @@
       }
     },
     "react-docgen": {
-      "version": "3.0.0-beta9",
-      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-beta9.tgz",
-      "integrity": "sha512-3UqwxygAP/eZdDtOKum6vClKWUlceZ7RBVQ3Fe122l1WBYOqHcBzoUZIwN8feaLVo+s2eB/q+NkBfanLgvmt+w==",
+      "version": "3.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-3.0.0-rc.0.tgz",
+      "integrity": "sha512-quhNeAo5LeACZ31LDAifq2Knyz2XE+Zm9QLo4EHgw+NifxBzH8FCQ5PyAPORqaAhWMiPOwYoIZ0biZVGqEkYag==",
       "requires": {
+        "@babel/parser": "7.0.0-beta.53",
         "async": "2.6.1",
         "babel-runtime": "6.26.0",
-        "babylon": "7.0.0-beta.31",
         "commander": "2.16.0",
         "doctrine": "2.1.0",
         "node-dir": "0.1.17",
-        "recast": "0.12.9"
+        "recast": "0.15.2"
       },
       "dependencies": {
-        "ast-types": {
-          "version": "0.10.1",
-          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz",
-          "integrity": "sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ=="
-        },
-        "babylon": {
-          "version": "7.0.0-beta.31",
-          "resolved": "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.31.tgz",
-          "integrity": "sha512-6lm2mV3S51yEnKmQQNnswoABL1U1H1KHoCCVwdwI3hvIv+W7ya4ki7Aw4o4KxtUHjNKkK5WpZb22rrMMOcJXJQ=="
-        },
-        "esprima": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
-        },
         "node-dir": {
           "version": "0.1.17",
           "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
@@ -15981,18 +15841,6 @@
           "requires": {
             "minimatch": "3.0.4"
           }
-        },
-        "recast": {
-          "version": "0.12.9",
-          "resolved": "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz",
-          "integrity": "sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A==",
-          "requires": {
-            "ast-types": "0.10.1",
-            "core-js": "2.5.7",
-            "esprima": "4.0.1",
-            "private": "0.1.8",
-            "source-map": "0.6.1"
-          }
         }
       }
     },
@@ -17437,7 +17285,7 @@
         },
         "compression": {
           "version": "1.6.2",
-          "resolved": "http://registry.npmjs.org/compression/-/compression-1.6.2.tgz",
+          "resolved": "https://registry.npmjs.org/compression/-/compression-1.6.2.tgz",
           "integrity": "sha1-zOsSHsydCcUtetDDNQ6pPd1AK8M=",
           "requires": {
             "accepts": "1.3.5",
@@ -17644,7 +17492,7 @@
         },
         "compression": {
           "version": "1.6.2",
-          "resolved": "http://registry.npmjs.org/compression/-/compression-1.6.2.tgz",
+          "resolved": "https://registry.npmjs.org/compression/-/compression-1.6.2.tgz",
           "integrity": "sha1-zOsSHsydCcUtetDDNQ6pPd1AK8M=",
           "requires": {
             "accepts": "1.3.5",
@@ -17719,7 +17567,7 @@
             "cssstyle": "0.2.37",
             "data-urls": "1.0.0",
             "domexception": "1.0.1",
-            "escodegen": "1.10.0",
+            "escodegen": "1.11.0",
             "html-encoding-sniffer": "1.0.2",
             "left-pad": "1.3.0",
             "nwmatcher": "1.4.4",
@@ -18055,7 +17903,7 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
       "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
       "requires": {
-        "js-base64": "2.4.6",
+        "js-base64": "2.4.8",
         "source-map": "0.4.4"
       },
       "dependencies": {
@@ -19775,7 +19623,7 @@
           "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-22.4.3.tgz",
           "integrity": "sha512-iAMeKxhB3Se5xkSjU0NndLLCHtP4n+GtCqV0bISKA5dmOXQfEbdEmYiu2qpnWBDCQdEafNDDU6Q+l6oBMd/+BA==",
           "requires": {
-            "@babel/code-frame": "7.0.0-beta.53",
+            "@babel/code-frame": "7.0.0-beta.54",
             "chalk": "2.4.1",
             "micromatch": "2.3.11",
             "slash": "1.0.0",
@@ -20168,9 +20016,9 @@
       "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
     },
     "tslint": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.10.0.tgz",
-      "integrity": "sha1-EeJrzLiK+gLdDZlWyuPUVAtfVMM=",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.11.0.tgz",
+      "integrity": "sha1-mPMMAurjzecAYgHkwzywi0hYHu0=",
       "requires": {
         "babel-code-frame": "6.26.0",
         "builtin-modules": "1.1.1",
@@ -20183,7 +20031,7 @@
         "resolve": "1.8.1",
         "semver": "5.5.0",
         "tslib": "1.9.3",
-        "tsutils": "2.27.2"
+        "tsutils": "2.28.0"
       }
     },
     "tslint-microsoft-contrib": {
@@ -20191,7 +20039,7 @@
       "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.0.3.tgz",
       "integrity": "sha512-5AnfTGlfpUzpRHLmoojPBKFTTmbjnwgdaTHMdllausa4GBPya5u36i9ddrTX4PhetGZvd4JUYIpAmgHqVnsctg==",
       "requires": {
-        "tsutils": "2.27.2"
+        "tsutils": "2.28.0"
       }
     },
     "tslint-react": {
@@ -20199,13 +20047,13 @@
       "resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-3.6.0.tgz",
       "integrity": "sha512-AIv1QcsSnj7e9pFir6cJ6vIncTqxfqeFF3Lzh8SuuBljueYzEAtByuB6zMaD27BL0xhMEqsZ9s5eHuCONydjBw==",
       "requires": {
-        "tsutils": "2.27.2"
+        "tsutils": "2.28.0"
       }
     },
     "tsutils": {
-      "version": "2.27.2",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.27.2.tgz",
-      "integrity": "sha512-qf6rmT84TFMuxAKez2pIfR8UCai49iQsfB7YWVjV1bKpy/d0PWT5rEOSM6La9PiHZ0k1RRZQiwVdVJfQ3BPHgg==",
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz",
+      "integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==",
       "requires": {
         "tslib": "1.9.3"
       }
@@ -20251,9 +20099,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.1.tgz",
-      "integrity": "sha512-Ao/f6d/4EPLq0YwzsQz8iXflezpTkQzqAyenTiw4kCUGr1uPiFLC3+fZ+gMZz6eeI/qdRUqvC+HxIJzUAzEFdg=="
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.4.tgz",
+      "integrity": "sha512-IIU5cN1mR5J3z9jjdESJbnxikTrEz3lzAw/D0Tf45jHpBp55nY31UkUvmVHoffCfKHTqJs3fCLPDxknQTTFegQ=="
     },
     "typical": {
       "version": "2.6.1",
@@ -21413,7 +21261,7 @@
         "v8-compile-cache": "1.1.2",
         "webpack-addons": "1.1.5",
         "yargs": "11.1.0",
-        "yeoman-environment": "2.3.0",
+        "yeoman-environment": "2.3.1",
         "yeoman-generator": "2.0.5"
       },
       "dependencies": {
@@ -21523,7 +21371,7 @@
         "array-includes": "3.0.3",
         "bonjour": "3.5.0",
         "chokidar": "2.0.4",
-        "compression": "1.7.2",
+        "compression": "1.7.3",
         "connect-history-api-fallback": "1.5.0",
         "debug": "3.1.0",
         "del": "3.0.0",
@@ -22002,9 +21850,9 @@
       }
     },
     "webpack-hot-middleware": {
-      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.22.2.tgz",
-      "integrity": "sha512-uccPS6b/UlXJoNCS+3fuc40z2KZgO0qQhnu+Ne1iZiHTy9s5fMCJAV+Vc8VTVkN203UphsxQmkumxYeHLiQ5jg==",
+      "version": "2.22.3",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.22.3.tgz",
+      "integrity": "sha512-mrG3bJGX4jgWbrpY0ghIpPgCmNhZziFMBJBmZfpIe6K/P1rWPkdkbGihbCUIufgQ8ruX4txE5/CKSeFNzDcYOw==",
       "requires": {
         "ansi-html": "0.0.7",
         "html-entities": "1.2.1",
@@ -22394,9 +22242,9 @@
       }
     },
     "yeoman-environment": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/yeoman-environment/-/yeoman-environment-2.3.0.tgz",
-      "integrity": "sha512-PHSAkVOqYdcR+C+Uht1SGC4eVD/9OhygYFkYaI66xF8vKIeS1RNYay+umj2ZrQeJ50tF5Q/RSO6qGDz9y3Ifug==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yeoman-environment/-/yeoman-environment-2.3.1.tgz",
+      "integrity": "sha512-7BFbWNnJqG8f0TFR/awcccHj7Vl9CeG66Yuu81DiVIamqO7Uo/EOrdryjNICdRJNFdaQTliN4HUkM1zQBzszCQ==",
       "requires": {
         "chalk": "2.4.1",
         "cross-spawn": "6.0.5",
@@ -22501,7 +22349,7 @@
         "shelljs": "0.8.2",
         "text-table": "0.2.0",
         "through2": "2.0.3",
-        "yeoman-environment": "2.3.0"
+        "yeoman-environment": "2.3.1"
       },
       "dependencies": {
         "cross-spawn": {
diff --git a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 7dd9e23076a051..d9c39048772a46 100644
--- a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -3,7 +3,8 @@ import { max as d3Max } from 'd3-array';
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis';
 import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale';
 import { select as d3Select } from 'd3-selection';
-import { classNamesFunction, IClassNames } from '../../Utilities';
+import { classNamesFunction } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import {
   IHorizontalBarChartProps,
   IHorizontalBarChartStyleProps,
@@ -24,7 +25,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     yAxisTickCount: 10
   };
   private _colors: string[];
-  private _classNames: IClassNames<IHorizontalBarChartStyles>;
+  private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;
   constructor(props: IHorizontalBarChartProps) {
     super(props);
 
diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index 251b9fbb5a6dee..8d4ca773194351 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -3,7 +3,8 @@ import { max as d3Max } from 'd3-array';
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis';
 import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { select as d3Select } from 'd3-selection';
-import { classNamesFunction, IClassNames } from '../../Utilities';
+import { classNamesFunction } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { ILineChartProps, ILineChartStyleProps, ILineChartStyles, IDataPoint } from './LineChart.types';
 
 const getClassNames = classNamesFunction<ILineChartStyleProps, ILineChartStyles>();
@@ -18,7 +19,7 @@ export class LineChartBase extends React.Component<ILineChartProps, {}> {
   private _strokeWidth: number;
   private _yAxisTickCount: number;
   private _color: string;
-  private _classNames: IClassNames<ILineChartStyles>;
+  private _classNames: IProcessedStyleSet<ILineChartStyles>;
 
   constructor(props: ILineChartProps) {
     super(props);
diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 77a505e06aa2ef..01780047111995 100644
--- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -3,7 +3,9 @@ import { max as d3Max } from 'd3-array';
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis';
 import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale';
 import { select as d3Select } from 'd3-selection';
-import { classNamesFunction, IClassNames } from '../../Utilities';
+import { classNamesFunction } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
+
 import {
   IVerticalBarChartProps,
   IVerticalBarChartStyleProps,
@@ -22,7 +24,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
   private _barWidth: number;
   private _yAxisTickCount: number;
   private _colors: string[];
-  private _classNames: IClassNames<IVerticalBarChartStyles>;
+  private _classNames: IProcessedStyleSet<IVerticalBarChartStyles>;
 
   constructor(props: IVerticalBarChartProps) {
     super(props);
diff --git a/packages/example-app-base/src/components/templates/PageContent.tsx b/packages/example-app-base/src/components/templates/PageContent.tsx
index d554a3a461f9b0..a6be4acba17196 100644
--- a/packages/example-app-base/src/components/templates/PageContent.tsx
+++ b/packages/example-app-base/src/components/templates/PageContent.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BaseComponent, IBaseProps, IClassNames, customizable } from 'office-ui-fabric-react/lib/Utilities';
-import { ITheme, IStyle, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { BaseComponent, IBaseProps, customizable } from 'office-ui-fabric-react/lib/Utilities';
+import { ITheme, IStyle, mergeStyleSets, IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IPageContentProps extends React.Props<PageContent>, IBaseProps {
   theme?: ITheme;
@@ -20,7 +20,7 @@ const getDefaultStyles = (props: IPageContentProps): IPageContentStyles => ({
 export class PageContent extends BaseComponent<IPageContentProps, {}> {
   public render(): JSX.Element {
     const { children } = this.props;
-    const classNames: IClassNames<IPageContentStyles> = mergeStyleSets(getDefaultStyles(this.props));
+    const classNames: IProcessedStyleSet<IPageContentStyles> = mergeStyleSets(getDefaultStyles(this.props));
 
     return <div className={classNames.root}>{children}</div>;
   }
diff --git a/packages/example-app-base/src/components/templates/PageExampleCard.tsx b/packages/example-app-base/src/components/templates/PageExampleCard.tsx
index 3ec768aff6592a..2019a1b51f84ca 100644
--- a/packages/example-app-base/src/components/templates/PageExampleCard.tsx
+++ b/packages/example-app-base/src/components/templates/PageExampleCard.tsx
@@ -1,5 +1,5 @@
-import { BaseComponent, IBaseProps, IClassNames, autobind, customizable } from 'office-ui-fabric-react/lib/Utilities';
-import { ITheme, IStyle, mergeStyleSets, getFocusStyle } from 'office-ui-fabric-react/lib/Styling';
+import { BaseComponent, IBaseProps, autobind, customizable } from 'office-ui-fabric-react/lib/Utilities';
+import { ITheme, IStyle, mergeStyleSets, getFocusStyle, IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling';
 import * as React from 'react';
 import { TypeScriptSnippet } from './TypeScriptSnippet';
 import { PageHeader } from './PageHeader';
@@ -79,7 +79,7 @@ export class PageExampleCard extends BaseComponent<IPageExampleCardProps, IPageE
     const { children, theme, code, title } = this.props;
     const { expanded } = this.state;
     const styleProps: IPageExampleCardStyleProps = { theme: theme! };
-    const classNames: IClassNames<IPageExampleCardStyles> = mergeStyleSets(getDefaultStyles(styleProps));
+    const classNames: IProcessedStyleSet<IPageExampleCardStyles> = mergeStyleSets(getDefaultStyles(styleProps));
 
     return (
       <div className={classNames.root}>
diff --git a/packages/example-app-base/src/components/templates/PageHeader.base.tsx b/packages/example-app-base/src/components/templates/PageHeader.base.tsx
index 19da679e07365f..5a68c970e78987 100644
--- a/packages/example-app-base/src/components/templates/PageHeader.base.tsx
+++ b/packages/example-app-base/src/components/templates/PageHeader.base.tsx
@@ -8,7 +8,8 @@ export class PageHeaderBase extends BaseComponent<IPageHeaderProps, {}> {
   public render(): JSX.Element {
     const { theme, children, getStyles } = this.props;
     const stylesProps: IPageHeaderStylesProps = { theme: theme! };
-    const classNames: IClassNames<IPageHeaderStyles> = mergeStyleSets(getStyles && getStyles(stylesProps));
+
+    const classNames = getStyles ? mergeStyleSets(getStyles(stylesProps)) : { root: '' };
 
     return <h2 className={classNames.root}>{children}</h2>;
   }
diff --git a/packages/example-app-base/src/components/templates/PageImageSet.tsx b/packages/example-app-base/src/components/templates/PageImageSet.tsx
index 24c57e59966c08..8cb6a028f421f0 100644
--- a/packages/example-app-base/src/components/templates/PageImageSet.tsx
+++ b/packages/example-app-base/src/components/templates/PageImageSet.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseComponent, IBaseProps, IClassNames, customizable } from 'office-ui-fabric-react/lib/Utilities';
-import { ITheme, IStyle, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { ITheme, IStyle, mergeStyleSets, IStyleSet } from 'office-ui-fabric-react/lib/Styling';
 import { IImageProps } from 'office-ui-fabric-react/lib/Image';
 
 export interface IPageImageSetStyles {
@@ -20,7 +20,7 @@ export interface IPageImageSetProps extends React.Props<PageImageSet>, IBaseProp
   images: IImageProps[];
 }
 
-const getDefaultStyles = (props: IPageImageSetStyleProps): IPageImageSetStyles => ({
+const getDefaultStyles = (props: IPageImageSetStyleProps): IStyleSet<IPageImageSetStyles> => ({
   root: {
     display: 'flex',
     flexFlow: 'row nowrap',
@@ -41,10 +41,9 @@ export class PageImageSet extends BaseComponent<IPageImageSetProps, {}> {
   public render(): JSX.Element {
     const { theme, getStyles, images } = this.props;
     const styleProps: IPageImageSetStyleProps = { theme: theme! };
-    const classNames: IClassNames<IPageImageSetStyles> = mergeStyleSets(
-      getDefaultStyles(styleProps),
-      getStyles && getStyles(styleProps)
-    );
+    const classNames = getStyles
+      ? mergeStyleSets(getDefaultStyles(styleProps), getStyles(styleProps))
+      : mergeStyleSets(getDefaultStyles(styleProps));
 
     return (
       <div className={classNames.root}>
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
index 4f7649d88ea5f8..dafd07563ea34f 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerCircle-root',
@@ -12,7 +12,7 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
index 70aaad9cb6ca45..87625bb91dc299 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, ITheme } from '../../../Styling';
 import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
 
 export interface IShimmerCircle {}
@@ -23,7 +23,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
   /**
    * Used to
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -38,7 +38,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
 
 export interface IShimmerCircleStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
   theme: ITheme;
 }
 
diff --git a/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx b/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
index 2901ff2b3fe966..23f32a0c821cb5 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
+++ b/packages/experiments/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
@@ -5,7 +5,7 @@ import {
   IShimmerElementsGroupStyleProps,
   IShimmerElementsGroupStyles
 } from './ShimmerElementsGroup.types';
-import { IStyleSet } from '../../../Styling';
+import { IStyle } from '../../../Styling';
 import {
   ShimmerElementType,
   ShimmerElementVerticalAlign,
@@ -67,11 +67,11 @@ export class ShimmerElementsGroupBase extends BaseComponent<IShimmerElementsGrou
     return renderedElements;
   };
 
-  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyleSet | undefined => {
+  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyle | undefined => {
     const elemHeight: number | undefined = elem.height;
     const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0;
 
-    let borderStyle: IStyleSet | undefined;
+    let borderStyle: IStyle | undefined;
 
     if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.center) {
       borderStyle = {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
index 53fa12b8effcda..6babe29cfe79cd 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerGap-root'
@@ -11,7 +11,7 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IStyle = !!borderStyle ? borderStyle : {};
   const ACTUAL_WIDTH = widthInPercentage ? widthInPercentage + '%' : widthInPixel ? widthInPixel + 'px' : '10px';
 
   return {
diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
index 14700107156a69..dd32b6b3d29d44 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
+import { IStyle, ITheme } from '../../../Styling';
 import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
 
 export interface IShimmerGap {}
@@ -35,7 +35,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
   /**
    * Sets custom styling of the gap.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -52,7 +52,7 @@ export interface IShimmerGapStyleProps {
   height?: number;
   widthInPercentage?: number;
   widthInPixel?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
   theme: ITheme;
 }
 
diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
index 3c35fe1d81cfc3..84ee7062ad5b50 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerLine-root',
@@ -15,10 +15,10 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : { borderWidth: '0px' };
+  const styles: IStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' };
   const ACTUAL_WIDTH = widthInPercentage ? widthInPercentage + '%' : widthInPixel ? widthInPixel + 'px' : '100%';
 
-  const sharedCornerStyles: IStyleSet = {
+  const sharedCornerStyles: IStyle = {
     position: 'absolute',
     fill: palette.white
   };
diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
index af92750af90eef..a50ab3db86995a 100644
--- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
+++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
-import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
+import { IStyle, ITheme } from '../../../Styling';
+import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
 
 export interface IShimmerLine {}
 
@@ -35,7 +35,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
   /**
    * Sets custom styling of the rectangle.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -52,7 +52,7 @@ export interface IShimmerLineStyleProps {
   height?: number;
   widthInPercentage?: number;
   widthInPixel?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IStyle;
   theme: ITheme;
 }
 
diff --git a/packages/experiments/src/components/Text/createComponent.tsx b/packages/experiments/src/components/Text/createComponent.tsx
index 756d0666c327d5..9914eddfff6969 100644
--- a/packages/experiments/src/components/Text/createComponent.tsx
+++ b/packages/experiments/src/components/Text/createComponent.tsx
@@ -1,16 +1,16 @@
-import { IClassNames, IStyleFunction, mergeStyleSets } from 'office-ui-fabric-react';
+import { IClassNames, IStyleFunction, mergeStyleSets, IStyleSet } from 'office-ui-fabric-react';
 import * as React from 'react';
 import { ITheme } from './theming/ITheme';
 import { ThemeConsumer } from './theming/ThemeProvider';
 
 export type IStyleFunction<TProps, TStyles> = (props: TProps) => Partial<TStyles>;
 
-export interface IPropsWithStyles<TProps, TStyles> {
+export interface IPropsWithStyles<TProps, TStyles extends IStyleSet<TStyles>> {
   styles?: IStyleFunction<TProps, TStyles> | Partial<TStyles>;
 }
 
 // Components should accept styling.
-export type IComponentProps<TProps, TStyles> = TProps & {
+export type IComponentProps<TProps, TStyles extends IStyleSet<TStyles>> = TProps & {
   styles?: IStyleFunction<IPropsWithStyles<TProps, TStyles>, TStyles> | Partial<TStyles>;
 };
 
@@ -26,7 +26,7 @@ export type IViewProps<TProps, TStyles> = TProps & {
 // tslint:disable-next-line:no-any
 const augmentations: any = {};
 
-export interface IComponentOptions<TProps, TStyles, TStatics> {
+export interface IComponentOptions<TProps, TStyles extends IStyleSet<TStyles>, TStatics> {
   displayName: string;
   state?: React.ComponentType<IComponentProps<TProps, TStyles>>;
   styles?: IStyleFunction<IStyleProps<TProps, TStyles>, TStyles> | Partial<TStyles>;
@@ -34,7 +34,7 @@ export interface IComponentOptions<TProps, TStyles, TStatics> {
   statics?: TStatics;
 }
 
-function evaluateStyle<TProps, TStyles>(
+function evaluateStyle<TProps, TStyles extends IStyleSet<TStyles>>(
   props: TProps,
   styles?: IStyleFunction<TProps, TStyles> | Partial<TStyles> | undefined
 ): Partial<TStyles> | undefined {
@@ -46,7 +46,7 @@ function evaluateStyle<TProps, TStyles>(
 }
 
 // Helper function to tie them together.
-export function createComponent<TProps, TStyles, TStatics = {}>(
+export function createComponent<TProps, TStyles extends IStyleSet<TStyles>, TStatics = {}>(
   options: IComponentOptions<TProps, TStyles, TStatics>
 ): React.StatelessComponent<IComponentProps<TProps, TStyles>> & TStatics {
   const result: React.StatelessComponent<TProps> = (userProps: TProps) => {
@@ -65,13 +65,15 @@ export function createComponent<TProps, TStyles, TStatics = {}>(
           {(theme: ITheme) => {
             const styleProps = { theme, ...(processedProps as {}) };
 
+            const styleSets: Array<TStyles> = [
+              evaluateStyle(styleProps, componentStyles),
+              // tslint:disable-next-line:no-any
+              evaluateStyle(styleProps, styles as any)
+            ].filter((elem: Partial<TStyles> | undefined) => !!elem) as Array<TStyles>;
+
             return ComponentView({
               ...(processedProps as {}),
-              classNames: mergeStyleSets(
-                evaluateStyle(styleProps, componentStyles),
-                // tslint:disable-next-line:no-any
-                evaluateStyle(styleProps, styles as any)
-              )
+              classNames: mergeStyleSets(...styleSets)
             });
           }}
         </ThemeConsumer>
@@ -91,7 +93,7 @@ export function createComponent<TProps, TStyles, TStatics = {}>(
 }
 
 // Helper function to augment existing components that have been created.
-export function augmentComponent<TProps, TStyles, TStatics>(
+export function augmentComponent<TProps, TStyles extends IStyleSet<TStyles>, TStatics>(
   options: IComponentOptions<TProps, TStyles, TStatics>
 ): void {
   augmentations[options.displayName] = {
diff --git a/packages/merge-styles/src/IStyle.ts b/packages/merge-styles/src/IStyle.ts
index 5fc3c158746f44..7735148a929e06 100644
--- a/packages/merge-styles/src/IStyle.ts
+++ b/packages/merge-styles/src/IStyle.ts
@@ -20,7 +20,6 @@ export interface IRawStyle extends IRawStyleBase {
 }
 
 export type IStyleBase = IRawStyle | string | false | null | undefined;
-
 export interface IStyleBaseArray extends Array<IStyle> {}
 
 /**
diff --git a/packages/merge-styles/src/IStyleFunction.ts b/packages/merge-styles/src/IStyleFunction.ts
new file mode 100644
index 00000000000000..38bc5bcd1254aa
--- /dev/null
+++ b/packages/merge-styles/src/IStyleFunction.ts
@@ -0,0 +1,16 @@
+import { IStyleSet } from './IStyleSet';
+
+/**
+ * A style function takes in styleprops and returns a partial styleset.
+ */
+export type IStyleFunction<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> = (
+  props: TStylesProps
+) => Partial<TStyleSet>;
+
+/**
+ * Represents either a style function that takes in style props and returns a partial styleset,
+ * or a partial styleset object.
+ */
+export type IStyleFunctionOrObject<TStylesProps, TStyleSet extends IStyleSet<TStyleSet>> =
+  | IStyleFunction<TStylesProps, TStyleSet>
+  | Partial<TStyleSet>;
diff --git a/packages/merge-styles/src/IStyleSet.ts b/packages/merge-styles/src/IStyleSet.ts
index 82926ab5b49a81..98062d4b7d0483 100644
--- a/packages/merge-styles/src/IStyleSet.ts
+++ b/packages/merge-styles/src/IStyleSet.ts
@@ -1,5 +1,37 @@
 import { IStyle } from './IStyle';
+import { IStyleFunctionOrObject, IStyleFunction } from './IStyleFunction';
 
-export type IStyleSet = {
-  [key: string]: IStyle;
+export type Diff<T extends keyof any, U extends keyof any> = ({ [P in T]: P } &
+  { [P in U]: never } & { [x: string]: never })[T];
+
+export type Omit<U, K extends keyof U> = Pick<U, Diff<keyof U, K>>;
+
+/**
+ * A style set is a dictionary of display areas to IStyle objects.
+ * It may optionally contain style functions for sub components in the special `subComponentStyles`
+ * property.
+ */
+export type IStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
+  [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: IStyle
+} & {
+  subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject<any, IStyleSet<any>> };
+};
+
+/**
+ * A concatenated style set differs from `IStyleSet` in that subComponentStyles will always be a style function.
+ */
+export type IConcatenatedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
+  [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: IStyle
+} & {
+  subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, IStyleSet<any>> };
+};
+
+/**
+ * A processed style set is one which the set of styles associated with each area has been converted
+ * into a class name. Additionally, all subComponentStyles are style functions.
+ */
+export type IProcessedStyleSet<TStyleSet extends IStyleSet<TStyleSet>> = {
+  [P in keyof Omit<TStyleSet, 'subComponentStyles'>]: string
+} & {
+  subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction<any, IStyleSet<any>> };
 };
diff --git a/packages/merge-styles/src/concatStyleSets.test.ts b/packages/merge-styles/src/concatStyleSets.test.ts
index f075d311b047cf..a826ad90e95f1f 100644
--- a/packages/merge-styles/src/concatStyleSets.test.ts
+++ b/packages/merge-styles/src/concatStyleSets.test.ts
@@ -1,9 +1,8 @@
 import { concatStyleSets } from './concatStyleSets';
-import { IStyle } from './IStyle';
 
 describe('concatStyleSets', () => {
   it('can concat style sets', () => {
-    const result = concatStyleSets<{ root?: IStyle; a?: IStyle; b?: IStyle }>(
+    const result = concatStyleSets(
       {
         root: { background: 'red' },
         a: { background: 'green' }
@@ -34,4 +33,110 @@ describe('concatStyleSets', () => {
       b: { background: 'blue' }
     });
   });
+
+  it('can concat mixed style sets with style functions on both ends', () => {
+    const fn1 = jest.fn().mockReturnValue({
+      root: { background: 'green', fontSize: 12 }
+    });
+
+    const fn2 = jest.fn().mockReturnValue({
+      root: {
+        background: 'yellow',
+        color: 'pink'
+      }
+    });
+
+    const result = concatStyleSets(
+      {
+        root: { background: 'red' },
+        a: { background: 'green' },
+        subComponentStyles: {
+          a: fn1
+        }
+      },
+      {
+        a: { background: 'white' },
+        b: { background: 'blue' },
+        subComponentStyles: {
+          a: fn2
+        }
+      },
+      {
+        root: {
+          selectors: {
+            ':hover': { background: 'yellow' }
+          }
+        }
+      }
+    );
+
+    expect(result.root).toEqual([
+      { background: 'red' },
+      {
+        selectors: {
+          ':hover': { background: 'yellow' }
+        }
+      }
+    ]);
+
+    expect(result.b).toEqual({ background: 'blue' });
+    expect(result.a).toEqual([{ background: 'green' }, { background: 'white' }]);
+    expect(result.subComponentStyles).toBeDefined();
+    expect(typeof result.subComponentStyles!.a === 'function').toBe(true);
+    const aExpanded = result.subComponentStyles!.a({});
+    expect(aExpanded).toEqual({
+      root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }]
+    });
+  });
+
+  it('can handle falsy values and sub component styles that has objects', () => {
+    const fn1 = jest.fn().mockReturnValue({
+      root: {
+        background: 'green',
+        fontSize: 12
+      }
+    });
+
+    const fn2 = jest.fn().mockReturnValue({
+      root: {
+        background: 'yellow',
+        color: 'pink'
+      }
+    });
+
+    // this cast to any is unnecessary with TS 2.9+.
+    // TODO: remove the cast to any.
+    const result = (concatStyleSets as any)(
+      false,
+      {
+        subComponentStyles: {
+          a: fn1
+        }
+      },
+      {
+        subComponentStyles: {
+          a: fn2
+        }
+      },
+      undefined,
+      undefined,
+      false,
+      {
+        subComponentStyles: {
+          a: {
+            root: {
+              fontSize: 14
+            }
+          }
+        }
+      }
+    );
+
+    expect(result.subComponentStyles).toBeDefined();
+    expect(typeof result.subComponentStyles!.a === 'function').toBe(true);
+    const aExpanded = result.subComponentStyles!.a({});
+    expect(aExpanded).toEqual({
+      root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }, { fontSize: 14 }]
+    });
+  });
 });
diff --git a/packages/merge-styles/src/concatStyleSets.ts b/packages/merge-styles/src/concatStyleSets.ts
index 7230dd7306bc74..300b2bb3ac4dad 100644
--- a/packages/merge-styles/src/concatStyleSets.ts
+++ b/packages/merge-styles/src/concatStyleSets.ts
@@ -1,24 +1,179 @@
+import { IStyleSet, IConcatenatedStyleSet } from './IStyleSet';
+import { IStyleBase, IStyle } from './IStyle';
+import { IStyleFunctionOrObject } from './IStyleFunction';
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet The first style set to be concatenated.
+ */
+export function concatStyleSets<TStyleSet extends IStyleSet<TStyleSet>>(
+  styleSet: TStyleSet | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ */
+export function concatStyleSets<TStyleSet1 extends IStyleSet<TStyleSet1>, TStyleSet2 extends IStyleSet<TStyleSet2>>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>;
+
 /**
- * Combine a set of styles together (but does not register css classes.)
- * @public
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
  */
-export function concatStyleSets<T extends object>(...args: (T | false | null | undefined)[]): T {
-  // tslint:disable-next-line:no-any
-  const mergedSet = {} as any;
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet3 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4>;
 
-  for (const currentSet of args) {
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet4 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
+ * @param styleSet5 The fifth set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>,
+  TStyleSet5 extends IStyleSet<TStyleSet5>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet4 | false | null | undefined,
+  styleSet5: TStyleSet5 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4 & TStyleSet5>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSet1 The first style set to be concatenated.
+ * @param styleSet2 The second style set to be concatenated.
+ * @param styleSet3 The third style set to be concatenated.
+ * @param styleSet4 The fourth style set to be concatenated.
+ * @param styleSet5 The fifth set to be concatenated.
+ * @param styleSet6 The sixth set to be concatenated.
+ */
+export function concatStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>,
+  TStyleSet5 extends IStyleSet<TStyleSet5>,
+  TStyleSet6 extends IStyleSet<TStyleSet6>
+>(
+  styleSet1: TStyleSet1 | false | null | undefined,
+  styleSet2: TStyleSet2 | false | null | undefined,
+  styleSet3: TStyleSet3 | false | null | undefined,
+  styleSet4: TStyleSet4 | false | null | undefined,
+  styleSet5: TStyleSet5 | false | null | undefined,
+  styleSet6: TStyleSet6 | false | null | undefined
+): IConcatenatedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4 & TStyleSet5 & TStyleSet6>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSets One or more stylesets to be merged (each param can also be falsy).
+ */
+export function concatStyleSets(
+  ...styleSets: (IStyleSet<any> | false | null | undefined)[]
+): IConcatenatedStyleSet<any>;
+
+/**
+ * Combine a set of styles together (but does not register css classes).
+ * @param styleSets One or more stylesets to be merged (each param can also be falsy).
+ */
+export function concatStyleSets(
+  ...styleSets: (IStyleSet<any> | false | null | undefined)[]
+): IConcatenatedStyleSet<any> {
+  const mergedSet: IConcatenatedStyleSet<any> = {};
+
+  // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.
+  const workingSubcomponentStyles: { [key: string]: Array<IStyleFunctionOrObject<any, any>> } = {};
+
+  for (const currentSet of styleSets) {
     if (currentSet) {
       for (const prop in currentSet) {
         if (currentSet.hasOwnProperty(prop)) {
-          const mergedValue = mergedSet[prop];
-          const currentValue = currentSet[prop];
+          if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {
+            // subcomponent styles - style functions or objects
+
+            const currentComponentStyles = currentSet.subComponentStyles;
+            for (const subCompProp in currentComponentStyles) {
+              if (currentComponentStyles.hasOwnProperty(subCompProp)) {
+                if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {
+                  workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);
+                } else {
+                  workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];
+                }
+              }
+            }
+
+            continue;
+          }
+
+          // the as any casts below is a workaround for ts 2.8.
+          // todo: remove cast to any in ts 2.9.
+          const mergedValue: IStyle = (mergedSet as any)[prop];
+          const currentValue = (currentSet as any)[prop];
 
           if (mergedValue === undefined) {
-            mergedSet[prop] = currentValue;
+            (mergedSet as any)[prop] = currentValue;
           } else {
-            mergedSet[prop] = [
-              ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue]),
-              ...(Array.isArray(currentValue) ? currentValue : [currentValue])
+            (mergedSet as any)[prop] = [
+              // https://github.com/Microsoft/TypeScript/issues/25474
+              ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue as IStyleBase]),
+              ...(Array.isArray(currentValue) ? currentValue : [currentValue as IStyleBase])
             ];
           }
         }
@@ -26,5 +181,25 @@ export function concatStyleSets<T extends object>(...args: (T | false | null | u
     }
   }
 
-  return mergedSet as T;
+  if (Object.keys(workingSubcomponentStyles).length > 0) {
+    mergedSet.subComponentStyles = {};
+    const mergedSubStyles = mergedSet.subComponentStyles;
+
+    // now we process the subcomponent styles if there are any
+    for (const subCompProp in workingSubcomponentStyles) {
+      if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {
+        const workingSet = workingSubcomponentStyles[subCompProp];
+        mergedSubStyles[subCompProp] = (styleProps: any) => {
+          return concatStyleSets(
+            ...workingSet.map(
+              (styleFunctionOrObject: IStyleFunctionOrObject<any, any>) =>
+                typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject
+            )
+          );
+        };
+      }
+    }
+  }
+
+  return mergedSet;
 }
diff --git a/packages/merge-styles/src/extractStyleParts.ts b/packages/merge-styles/src/extractStyleParts.ts
index 25b6bbe9d50ab1..3de7f84c4abeb2 100644
--- a/packages/merge-styles/src/extractStyleParts.ts
+++ b/packages/merge-styles/src/extractStyleParts.ts
@@ -1,4 +1,4 @@
-import { IStyle } from './IStyle';
+import { IStyle, IStyleBaseArray } from './IStyle';
 import { Stylesheet } from './Stylesheet';
 
 /**
@@ -7,7 +7,7 @@ import { Stylesheet } from './Stylesheet';
  */
 export function extractStyleParts(
   ...args: (IStyle | IStyle[] | false | null | undefined)[]
-): { classes: string[]; objects: IStyle[] } {
+): { classes: string[]; objects: IStyleBaseArray } {
   const classes: string[] = [];
   const objects: {}[] = [];
   const stylesheet = Stylesheet.getInstance();
diff --git a/packages/merge-styles/src/index.ts b/packages/merge-styles/src/index.ts
index c5401019fed3dd..43e6719e901880 100644
--- a/packages/merge-styles/src/index.ts
+++ b/packages/merge-styles/src/index.ts
@@ -1,6 +1,8 @@
 export { IRawStyle, IStyle } from './IStyle';
 
-export { IStyleSet } from './IStyleSet';
+export { IStyleFunction, IStyleFunctionOrObject } from './IStyleFunction';
+
+export { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet } from './IStyleSet';
 
 export { IFontFace, IFontWeight } from './IRawStyleBase';
 
diff --git a/packages/merge-styles/src/mergeStyleSets.test.ts b/packages/merge-styles/src/mergeStyleSets.test.ts
index ee1c2b66c5f47a..4594be52c5c9ce 100644
--- a/packages/merge-styles/src/mergeStyleSets.test.ts
+++ b/packages/merge-styles/src/mergeStyleSets.test.ts
@@ -15,12 +15,26 @@ describe('mergeStyleSets', () => {
   });
 
   it('can merge style sets', () => {
+    const fn1 = jest.fn().mockReturnValue({
+      root: { background: 'green', fontSize: 12 }
+    });
+
+    const fn2 = jest.fn().mockReturnValue({
+      root: {
+        background: 'yellow',
+        color: 'pink'
+      }
+    });
+
     const empty: { c?: string } = {};
-    const result: { root: string; a: string; b: string } = mergeStyleSets(
+    const result = mergeStyleSets(
       empty,
       {
         root: { background: 'red' },
-        a: { background: 'green' }
+        a: { background: 'green' },
+        subComponentStyles: {
+          labelStyles: fn1
+        }
       },
       {
         a: { background: 'white' },
@@ -31,14 +45,20 @@ describe('mergeStyleSets', () => {
           selectors: {
             ':hover': { background: 'yellow' }
           }
+        },
+        subComponentStyles: {
+          labelStyles: fn2
         }
       }
     );
 
-    expect(result).toEqual({
-      root: 'root-0',
-      a: 'a-1',
-      b: 'b-2'
+    expect(result.root).toBe('root-0');
+    expect(result.a).toBe('a-1');
+    expect(result.b).toBe('b-2');
+    expect(result.subComponentStyles).toBeDefined();
+    const mergedLabelStyles = result.subComponentStyles!.labelStyles({});
+    expect(mergedLabelStyles).toEqual({
+      root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }]
     });
 
     expect(_stylesheet.getRules()).toEqual(
diff --git a/packages/merge-styles/src/mergeStyleSets.ts b/packages/merge-styles/src/mergeStyleSets.ts
index 17e5043c0e5d26..b726c8a1af9859 100644
--- a/packages/merge-styles/src/mergeStyleSets.ts
+++ b/packages/merge-styles/src/mergeStyleSets.ts
@@ -2,42 +2,126 @@ import { extractStyleParts } from './extractStyleParts';
 import { concatStyleSets } from './concatStyleSets';
 import { IStyle } from './IStyle';
 import { styleToRegistration, applyRegistration } from './styleToClassName';
+import { IStyleSet, IProcessedStyleSet } from './IStyleSet';
 
 /**
- * Allows you to pass in 1 or more sets of areas which will return a merged
- * set of classes.
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
  *
- * @public
+ * @param styleSet The first style set to be merged and reigstered.
  */
-export function mergeStyleSets<K extends string>(
-  ...cssSets: ({ [P in K]?: IStyle } | null | undefined)[]
-): { [P in K]: string } {
+export function mergeStyleSets<TStyleSet extends IStyleSet<TStyleSet>>(
+  styleSet: TStyleSet
+): IProcessedStyleSet<TStyleSet>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSet1 The first style set to be merged.
+ * @param styleSet2 The second style set to be merged.
+ */
+export function mergeStyleSets<TStyleSet1 extends IStyleSet<TStyleSet1>, TStyleSet2 extends IStyleSet<TStyleSet2>>(
+  styleSet1: TStyleSet1,
+  styleSet2: TStyleSet2
+): IProcessedStyleSet<TStyleSet1 & TStyleSet2>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSet1 The first style set to be merged.
+ * @param styleSet2 The second style set to be merged.
+ * @param styleSet3 The third style set to be merged.
+ */
+export function mergeStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>
+>(
+  styleSet1: TStyleSet1,
+  styleSet2: TStyleSet2,
+  styleSet3: TStyleSet3
+): IProcessedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSet1 The first style set to be merged.
+ * @param styleSet2 The second style set to be merged.
+ * @param styleSet3 The third style set to be merged.
+ * @param styleSet4 The fourth style set to be merged.
+ */
+export function mergeStyleSets<
+  TStyleSet1 extends IStyleSet<TStyleSet1>,
+  TStyleSet2 extends IStyleSet<TStyleSet2>,
+  TStyleSet3 extends IStyleSet<TStyleSet3>,
+  TStyleSet4 extends IStyleSet<TStyleSet4>
+>(
+  styleSet1: TStyleSet1,
+  styleSet2: TStyleSet2,
+  styleSet3: TStyleSet3,
+  styleSet4: TStyleSet4
+): IProcessedStyleSet<TStyleSet1 & TStyleSet2 & TStyleSet3 & TStyleSet4>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSets One or more style sets to be merged.
+ */
+export function mergeStyleSets(...styleSets: IStyleSet<any>[]): IProcessedStyleSet<any>;
+
+/**
+ * Takes in one or more style set objects, each consisting of a set of areas,
+ * each which will produce a class name. Using this is analogous to calling
+ * `mergeStyles` for each property in the object, but ensures we maintain the
+ * set ordering when multiple style sets are merged.
+ *
+ * @param styleSets One or more style sets to be merged.
+ */
+export function mergeStyleSets(...styleSets: IStyleSet<any>[]): IProcessedStyleSet<any> {
   // tslint:disable-next-line:no-any
   const classNameSet: any = {};
   const classMap: { [key: string]: string } = {};
 
-  let cssSet = cssSets[0];
+  let styleSet = styleSets[0];
 
-  if (cssSet) {
-    if (cssSets.length > 1) {
-      cssSet = concatStyleSets(...cssSets);
+  if (styleSet) {
+    if (styleSets.length > 1) {
+      styleSet = concatStyleSets(...styleSets);
     }
 
     const registrations = [];
 
-    for (const prop in cssSet) {
-      if (cssSet.hasOwnProperty(prop)) {
-        const args: IStyle = cssSet[prop];
+    for (const styleSetArea in styleSet) {
+      if (styleSet.hasOwnProperty(styleSetArea)) {
+        if (styleSetArea === 'subComponentStyles') {
+          classNameSet.subComponentStyles = styleSet.subComponentStyles;
+          continue;
+        }
+
+        const styles: IStyle = (styleSet as any)[styleSetArea];
 
-        // tslint:disable-next-line:no-any
-        const { classes, objects } = extractStyleParts(args as any);
-        const registration = styleToRegistration({ displayName: prop }, objects);
+        const { classes, objects } = extractStyleParts(styles);
+        const registration = styleToRegistration({ displayName: styleSetArea }, objects);
 
         registrations.push(registration);
 
         if (registration) {
-          classMap[prop] = registration.className;
-          classNameSet[prop] = classes.concat([registration.className]).join(' ');
+          classMap[styleSetArea] = registration.className;
+          classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');
         }
       }
     }
diff --git a/packages/merge-styles/src/mergeStyles.ts b/packages/merge-styles/src/mergeStyles.ts
index 65e06274fe1817..68cb3a74c3dea5 100644
--- a/packages/merge-styles/src/mergeStyles.ts
+++ b/packages/merge-styles/src/mergeStyles.ts
@@ -1,4 +1,4 @@
-import { IStyle } from './IStyle';
+import { IStyle, IStyleBaseArray } from './IStyle';
 import { styleToClassName } from './styleToClassName';
 import { extractStyleParts } from './extractStyleParts';
 
@@ -7,7 +7,7 @@ import { extractStyleParts } from './extractStyleParts';
  *
  * @public
  */
-export function mergeStyles(...args: (IStyle | IStyle[] | false | null | undefined)[]): string {
+export function mergeStyles(...args: (IStyle | IStyleBaseArray | false | null | undefined)[]): string {
   const { classes, objects } = extractStyleParts(args);
 
   if (objects.length) {
diff --git a/packages/merge-styles/tslint.json b/packages/merge-styles/tslint.json
index 40ab7504688566..753df4fa78b33b 100644
--- a/packages/merge-styles/tslint.json
+++ b/packages/merge-styles/tslint.json
@@ -1,4 +1,6 @@
 {
   "extends": ["office-ui-fabric-react-tslint"],
-  "rules": {}
+  "rules": {
+    "no-any": false
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
index 4a52f296285360..d0f2b9710e0c1e 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
@@ -8,7 +8,7 @@ import { Link } from '../../../Link';
 export class ActivityItemBasicExample extends React.Component<React.Props<ActivityItemBasicExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     // tslint:disable:jsx-no-lambda
     const activityItemExamples = [
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
index 2ad4833ab17fd1..878dc3d5e8da89 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
@@ -9,7 +9,7 @@ import { Icon } from '../../../Icon';
 export class ActivityItemCompactExample extends React.Component<React.Props<ActivityItemCompactExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     const activityItemExamples: Partial<IActivityItemProps & React.Props<{}>>[] = [
       {
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
index b406a10dde3765..9ac841dbc265a3 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
@@ -1,10 +1,6 @@
 import { IStyle } from '../../../Styling';
 
-export interface IActivityItemExampleStyleProps {
-  /**
-   * 404 No Style Props Found
-   */
-}
+export type IActivityItemExampleStyleProps = {};
 
 export interface IActivityItemExampleStyles {
   exampleRoot?: IStyle;
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
index 7f375598cdb08a..4d91daf5cff1dd 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
@@ -8,7 +8,7 @@ import { Link } from '../../../Link';
 export class ActivityItemPersonaExample extends React.Component<React.Props<ActivityItemPersonaExample>, {}> {
   public render(): JSX.Element {
     const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     // tslint:disable:jsx-no-lambda
     const activityItemExamples: (IActivityItemProps & { key: string | number })[] = [
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
index 8670dd368baa1b..dc424a4d759432 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BaseComponent, getRTL, createRef, classNamesFunction, IClassNames } from '../../Utilities';
+import { BaseComponent, getRTL, createRef, classNamesFunction } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { Link } from '../../Link';
 import { Icon } from '../../Icon';
@@ -28,7 +29,7 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
     overflowIndex: 0
   };
 
-  private _classNames: IClassNames<IBreadcrumbStyles>;
+  private _classNames: IProcessedStyleSet<IBreadcrumbStyles>;
   private _focusZone = createRef<FocusZone>();
 
   constructor(props: IBreadcrumbProps) {
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
index ba1564ff0cd818..2e1d24b70a357f 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
@@ -12,7 +12,7 @@ export class ButtonActionExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
index d223ab78adda9b..db131e8619eba4 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonAnchorExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
index 7a2abdb3c36b9a..a9620f4e165994 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
@@ -1,10 +1,6 @@
 import { IStyle } from '../../../Styling';
 
-export interface IButtonBasicExampleStyleProps {
-  /**
-   * 404 No Style Props Found
-   */
-}
+export type IButtonBasicExampleStyleProps = {};
 
 export interface IButtonBasicExampleStyles {
   example?: IStyle;
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
index e29714bf6e5f8d..feb52e5caf15e4 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
@@ -13,7 +13,7 @@ export class ButtonCompoundExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example, classNames.twoup)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
index e454509bdc6a48..84c0f745fe1620 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
@@ -9,7 +9,7 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.twoup)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
index ec2b1b9c28cb62..e6f22080e2f844 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonIconExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
index 2ff49524397cbf..9077ae67c334e4 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonPrimaryExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
index 70573ca0c1f664..36d2e272e0b11d 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
@@ -8,7 +8,7 @@ export class ButtonScreenReaderExample extends React.Component<IButtonProps, {}>
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.example)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 5ec946aefc5a19..3917da925f177b 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -14,7 +14,7 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
     const { disabled, checked } = this.props;
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div className={css(classNames.twoup)}>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
index 81c87e1be18a87..9115ff93a28a4e 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
@@ -52,7 +52,7 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
     );
 
     const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return <div className={css(classNames.example)}>{button}</div>;
   }
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx
index 3d52c6bf5831eb..1508f4747babd4 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx
@@ -3,7 +3,10 @@ import { BaseComponent } from '../../Utilities';
 import { ICheckProps } from './Check.types';
 import { Icon } from '../../Icon';
 import { getStyles } from './Check.styles';
-import { getClassNames } from './Check.classNames';
+import { classNamesFunction } from '../../Utilities';
+import { ICheckStyleProps, ICheckStyles } from './Check.types';
+
+const getClassNames = classNamesFunction<ICheckStyleProps, ICheckStyles>();
 
 export class CheckBase extends BaseComponent<ICheckProps, {}> {
   public static defaultProps: ICheckProps = {
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.classNames.ts b/packages/office-ui-fabric-react/src/components/Check/Check.classNames.ts
deleted file mode 100644
index 25e40902def93e..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Check/Check.classNames.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { classNamesFunction } from '../../Utilities';
-import { ICheckStyleProps, ICheckStyles } from './Check.types';
-
-export const getClassNames = classNamesFunction<ICheckStyleProps, ICheckStyles>();
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx
index 83bc5a898f5787..212383af3c29b4 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx
@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
-import { IClassNames } from '@uifabric/utilities/lib/IClassNames';
 import {
   IChoiceGroupOptionProps,
   IChoiceGroupOptionStyleProps,
   IChoiceGroupOptionStyles
 } from './ChoiceGroupOption.types';
 import { BaseComponent, classNamesFunction, getNativeProps, inputProperties, createRef } from '../../../Utilities';
+import { IProcessedStyleSet } from '../../../Styling';
 
 const getClassNames = classNamesFunction<IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>();
 
 export class ChoiceGroupOptionBase extends BaseComponent<IChoiceGroupOptionProps, any> {
   private _inputElement = createRef<HTMLInputElement>();
-  private _classNames: IClassNames<IChoiceGroupOptionStyles>;
+  private _classNames: IProcessedStyleSet<IChoiceGroupOptionStyles>;
 
   constructor(props: IChoiceGroupOptionProps) {
     super(props);
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
index b757084da51fee..fcf68a04ee466d 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
@@ -10,7 +10,7 @@ import { Beak, BEAK_HEIGHT, BEAK_WIDTH } from './Beak/Beak';
 import { DirectionalHint } from '../../common/DirectionalHint';
 
 // Coachmark
-import { ICoachmarkTypes } from './Coachmark.types';
+import { ICoachmarkProps } from './Coachmark.types';
 import {
   COACHMARK_HEIGHT,
   COACHMARK_WIDTH,
@@ -102,8 +102,8 @@ export interface ICoachmarkState {
   alertText?: string;
 }
 
-export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
-  public static defaultProps: Partial<ICoachmarkTypes> = {
+export class Coachmark extends BaseComponent<ICoachmarkProps, ICoachmarkState> {
+  public static defaultProps: Partial<ICoachmarkProps> = {
     isCollapsed: true,
     mouseProximityOffset: 10,
     delayBeforeMouseOpen: 3600, // The approximate time the coachmark shows up
@@ -129,7 +129,7 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
    */
   private _targetElementRect: ClientRect;
 
-  constructor(props: ICoachmarkTypes) {
+  constructor(props: ICoachmarkProps) {
     super(props);
 
     // Set defaults for state
@@ -267,18 +267,18 @@ export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
     );
   }
 
-  public componentWillReceiveProps(newProps: ICoachmarkTypes): void {
+  public componentWillReceiveProps(newProps: ICoachmarkProps): void {
     if (this.props.isCollapsed && !newProps.isCollapsed) {
       // The coachmark is about to open
       this._openCoachmark();
     }
   }
 
-  public shouldComponentUpdate(newProps: ICoachmarkTypes, newState: ICoachmarkState): boolean {
+  public shouldComponentUpdate(newProps: ICoachmarkProps, newState: ICoachmarkState): boolean {
     return !shallowCompare(newProps, this.props) || !shallowCompare(newState, this.state);
   }
 
-  public componentDidUpdate(prevProps: ICoachmarkTypes, prevState: ICoachmarkState): void {
+  public componentDidUpdate(prevProps: ICoachmarkProps, prevState: ICoachmarkState): void {
     if (
       prevState.targetAlignment !== this.state.targetAlignment ||
       prevState.targetPosition !== this.state.targetPosition
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
index 203ca713f1cb69..108193957cc3f1 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
@@ -1,11 +1,15 @@
 import { ICoachmarkStyles, ICoachmarkStyleProps } from './Coachmark.styles';
 import { IPositioningContainerTypes } from './PositioningContainer/PositioningContainer.types';
-import { IBaseProps, IRefObject, IStyleFunctionOrObject } from '../../Utilities';
+import { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
+import { Coachmark } from './Coachmark';
 import { ITeachingBubble } from '../../TeachingBubble';
 
 export interface ICoachmark {}
 
-export interface ICoachmarkTypes extends IBaseProps<ICoachmark> {
+/** @deprecated */
+export type ICoachmarkTypes = ICoachmarkProps;
+
+export interface ICoachmarkProps extends React.Props<Coachmark> {
   /**
    * Optional callback to access the ICoachmark interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
index e123732700766b..fc1676cfe8a470 100644
--- a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
@@ -56,7 +56,7 @@ export class CoachmarkBasicExample extends BaseComponent<{}, ICoachmarkBasicExam
           display: 'inline-block'
         }
       };
-    });
+    }, {});
 
     const buttonProps: IButtonProps = {
       text: 'Try it'
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
index 8a249e99a8036e..0a8fcbe75aff22 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
@@ -17,7 +17,7 @@ import { IColumnResizeDetails, SelectAllVisibility, IDropHintDetails } from './D
 import { IDetailsHeaderStyleProps, IDetailsHeaderStyles } from './DetailsHeader.types';
 import { classNamesFunction } from '../../Utilities';
 
-export const getClassNames = classNamesFunction<IDetailsHeaderStyleProps, IDetailsHeaderStyles>();
+const getClassNames = classNamesFunction<IDetailsHeaderStyleProps, IDetailsHeaderStyles>();
 
 const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
 const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx
index d65a874451ed0e..b9fbad70aa51b0 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.base.tsx
@@ -42,7 +42,7 @@ import { IList, List, IListProps, ScrollToMode } from '../../List';
 import { withViewport } from '../../utilities/decorators/withViewport';
 import { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';
 
-export const getClassNames = classNamesFunction<IDetailsListStyleProps, IDetailsListStyles>();
+const getClassNames = classNamesFunction<IDetailsListStyleProps, IDetailsListStyles>();
 
 export interface IDetailsListState {
   focusedItemIndex: number;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx
index 2fd24581745959..9930470cf8ae88 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.base.tsx
@@ -23,7 +23,7 @@ import { IDetailsRowCheckProps } from './DetailsRowCheck.types';
 import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';
 import { classNamesFunction } from '../../Utilities';
 
-export const getClassNames = classNamesFunction<IDetailsRowStyleProps, IDetailsRowStyles>();
+const getClassNames = classNamesFunction<IDetailsRowStyleProps, IDetailsRowStyles>();
 
 export interface IDetailsRowSelectionState {
   isSelected: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.classNames.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.classNames.ts
deleted file mode 100644
index 92fea2404041c0..00000000000000
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.classNames.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';
-import { classNamesFunction } from '../../Utilities';
-
-export const getClassNames = classNamesFunction<IDetailsRowStyleProps, IDetailsRowStyles>();
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
index fd94be01df94f9..f759cf97975d5c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts
@@ -1,12 +1,12 @@
 import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';
 import {
-  getGlobalClassNames,
-  getFocusStyle,
-  HighContrastSelector,
+  AnimationClassNames,
   FontSizes,
-  AnimationClassNames
+  HighContrastSelector,
+  IStyle,
+  getFocusStyle,
+  getGlobalClassNames
 } from '../../Styling';
-import { IStyleBaseArray, IStyle } from '../../../../merge-styles/lib/IStyle';
 
 const GlobalClassNames = {
   root: 'ms-DetailsRow',
@@ -104,7 +104,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
 
   const thickBorderStyle = `${values.rowShimmerHorizontalBorder * 4}px solid ${colors.defaultBackgroundColor}`;
   const thinBorderStyle = `${values.rowShimmerHorizontalBorder}px solid ${colors.defaultBackgroundColor}`;
-  const selectedStyles: IStyleBaseArray = [
+  const selectedStyles: IStyle = [
     getFocusStyle(theme, -1, undefined, undefined, themePrimary, white),
     classNames.isSelected,
     {
@@ -189,7 +189,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => {
     }
   ];
 
-  const cannotSelectStyles: IStyleBaseArray = [
+  const cannotSelectStyles: IStyle = [
     classNames.isContentUnselectable,
     {
       userSelect: 'none',
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
index 5e38bee7201339..7c1c8bbc91885e 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts
@@ -164,7 +164,7 @@ export type IDetailsRowStyleProps = Required<Pick<IDetailsRowProps, 'theme'>> &
   /** Whether this row can be selected */
   canSelect?: boolean;
 
-  /** Class name of when this becomes a drop taget */
+  /** Class name of when this becomes a drop target. */
   droppingClassName?: string;
 
   /** Is the checkbox visible */
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
index 00f2ad343556df..7e5a65745bc545 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { IDetailsRowCheckProps } from './DetailsRowCheck.types';
 import { css, styled } from '../../Utilities';
 import { Check } from '../../Check';
-import { getClassNames as getCheckClassNames } from '../Check/Check.classNames';
+import { ICheckStyleProps, ICheckStyles } from '../Check/Check.types';
 import { getStyles as getCheckStyles } from '../Check/Check.styles';
 import { getStyles } from './DetailsRowCheck.styles';
 import { IDetailsRowCheckStyleProps, IDetailsRowCheckStyles } from './DetailsRowCheck.types';
 import { classNamesFunction } from '../../Utilities';
 
+const getCheckClassNames = classNamesFunction<ICheckStyleProps, ICheckStyles>();
 const getClassNames = classNamesFunction<IDetailsRowCheckStyleProps, IDetailsRowCheckStyles>();
 
 const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx
index b1421fc2765bde..b0e0f39ff6876c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/ShimmeredDetailsList.base.tsx
@@ -5,7 +5,6 @@ import { SelectionMode } from '../../utilities/selection/interfaces';
 import { DetailsList } from './DetailsList';
 import { IDetailsRowProps } from './DetailsRow';
 import { Shimmer, ShimmerElementsGroup, ShimmerElementType, IShimmerElement } from '../Shimmer';
-import { getClassNames as getRowClassNames } from './DetailsRow.classNames';
 import {
   IShimmeredDetailsListProps,
   IShimmeredDetailsListStyleProps,
@@ -13,7 +12,11 @@ import {
 } from './ShimmeredDetailsList.types';
 import { CheckboxVisibility } from './DetailsList.types';
 
-export const getClassNames = classNamesFunction<IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles>();
+import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types';
+
+const getRowClassNames = classNamesFunction<IDetailsRowStyleProps, IDetailsRowStyles>();
+
+const getClassNames = classNamesFunction<IShimmeredDetailsListStyleProps, IShimmeredDetailsListStyles>();
 
 const SHIMMER_INITIAL_ITEMS = 10;
 const DEFAULT_SHIMMER_HEIGHT = 7;
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
index 0e3d74b400dca0..abd07aa897a100 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types';
-import { BaseComponent, classNamesFunction, IClassNames } from '../../Utilities';
+import { BaseComponent, classNamesFunction } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 
 const getClassNames = classNamesFunction<IDialogFooterStyleProps, IDialogFooterStyles>();
 
 export class DialogFooterBase extends BaseComponent<IDialogFooterProps, {}> {
-  private _classNames: IClassNames<IDialogFooterStyles>;
+  private _classNames: IProcessedStyleSet<IDialogFooterStyles>;
 
   public render(): JSX.Element {
     const { className, styles, theme } = this.props;
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx
index 42cf9aa5f62279..fc5e5ff552fafa 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.base.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BaseComponent, classNamesFunction } from '../../Utilities';
 import { GroupSpacer } from './GroupSpacer';
 import { IGroupFooterStyleProps, IGroupFooterStyles, IGroupFooterProps } from './GroupFooter.types';
-export const getClassNames = classNamesFunction<IGroupFooterStyleProps, IGroupFooterStyles>();
+const getClassNames = classNamesFunction<IGroupFooterStyleProps, IGroupFooterStyles>();
 
 export class GroupFooterBase extends BaseComponent<IGroupFooterProps, {}> {
   public render(): JSX.Element | null {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx
index bb5f335573463b..057d4d5f929171 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx
@@ -8,7 +8,8 @@ import { GroupSpacer } from './GroupSpacer';
 import { Spinner } from '../../Spinner';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { IGroupHeaderStyleProps, IGroupHeaderStyles, IGroupHeaderProps } from './GroupHeader.types';
-export const getClassNames = classNamesFunction<IGroupHeaderStyleProps, IGroupHeaderStyles>();
+
+const getClassNames = classNamesFunction<IGroupHeaderStyleProps, IGroupHeaderStyles>();
 
 export interface IGroupHeaderState {
   isCollapsed: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx
index 22c21258be3be4..87b1177a8ffd13 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.base.tsx
@@ -4,7 +4,8 @@ import { Link } from '../../Link';
 import { IGroupShowAllProps } from './GroupShowAll.types';
 import { IGroupShowAllStyleProps, IGroupShowAllStyles } from './GroupShowAll.types';
 import { GroupSpacer } from './GroupSpacer';
-export const getClassNames = classNamesFunction<IGroupShowAllStyleProps, IGroupShowAllStyles>();
+
+const getClassNames = classNamesFunction<IGroupShowAllStyleProps, IGroupShowAllStyles>();
 
 export class GroupShowAllBase extends BaseComponent<IGroupShowAllProps, {}> {
   public static defaultProps: IGroupShowAllProps = {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
index 939813ed921fc4..c859c3c1f74f6c 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
@@ -3,7 +3,7 @@ import { styled, classNamesFunction } from '../../Utilities';
 import { IGroupSpacerProps, IGroupSpacerStyleProps, IGroupSpacerStyles } from './GroupSpacer.types';
 import { getStyles } from './GroupSpacer.styles';
 
-export const getClassNames = classNamesFunction<IGroupSpacerStyleProps, IGroupSpacerStyles>();
+const getClassNames = classNamesFunction<IGroupSpacerStyleProps, IGroupSpacerStyles>();
 
 const SPACER_WIDTH = 36;
 
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.base.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.base.tsx
index 52a36716b8b593..9f1e3962655923 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.base.tsx
@@ -10,7 +10,8 @@ import {
 import { GroupedListSection } from './GroupedListSection';
 import { List, ScrollToMode } from '../../List';
 import { SelectionMode } from '../../utilities/selection/index';
-export const getClassNames = classNamesFunction<IGroupedListStyleProps, IGroupedListStyles>();
+
+const getClassNames = classNamesFunction<IGroupedListStyleProps, IGroupedListStyles>();
 
 export interface IGroupedListState {
   lastWidth?: number;
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts
index a95d649cdc590a..c0f1c31a2ad033 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts
@@ -3,11 +3,11 @@ import { memoizeFunction } from '../../Utilities';
 import { mergeStyleSets } from '../../Styling';
 
 export const getStyles = memoizeFunction(
-  (customStyles?: IHoverCardStyles): IHoverCardStyles => {
+  (customStyles: IHoverCardStyles = {}): IHoverCardStyles => {
     const styles: IHoverCardStyles = {
       host: {}
     };
 
-    return mergeStyleSets(styles, customStyles)!;
+    return mergeStyleSets<IHoverCardStyles, IHoverCardStyles>(styles, customStyles);
   }
 );
diff --git a/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx
index 8150dc73ae6048..fdb987e951aa36 100644
--- a/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx
@@ -105,7 +105,7 @@ export class KeytipLayerBase extends BaseComponent<IKeytipLayerProps, IKeytipLay
 
     const { keytips, visibleKeytips } = this.state;
 
-    this._classNames = getClassNames(styles!);
+    this._classNames = getClassNames(styles, {});
 
     return (
       <Layer styles={getLayerStyles}>
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx
index 9bb4c0e3536ce4..a6f07593d14d1c 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx
@@ -9,9 +9,9 @@ import {
   divProperties,
   elementContains,
   focusFirstChild,
-  getNativeProps,
-  IClassNames
+  getNativeProps
 } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { KeytipManager } from '../../utilities/keytips/KeytipManager';
 import {
   IOverflowSet,
@@ -33,7 +33,7 @@ export class OverflowSetBase extends BaseComponent<IOverflowSetProps, {}> implem
   private _persistedKeytips: { [uniqueID: string]: IKeytipProps } = {};
   private _keytipManager: KeytipManager = KeytipManager.getInstance();
   private _divContainer = createRef<HTMLDivElement>();
-  private _classNames: IClassNames<IOverflowSetStyles>;
+  private _classNames: IProcessedStyleSet<IOverflowSetStyles>;
 
   constructor(props: IOverflowSetProps) {
     super(props);
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
index eedd49c9bdef07..b96eb066ac58a4 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
@@ -25,7 +25,7 @@ export class OverlayDarkExample extends React.Component<
   public render(): JSX.Element {
     const { isOverlayVisible } = this.state;
     const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
index 6b17e01a7e5f0d..164b5c5659dd9e 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
@@ -25,7 +25,7 @@ export class OverlayLightExample extends React.Component<
   public render(): JSX.Element {
     const { isOverlayVisible } = this.state;
     const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
-    const classNames = getClassNames(getStyles);
+    const classNames = getClassNames(getStyles, {});
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
index a3afd2785ecd57..20587796437bc6 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { BaseComponent, classNamesFunction } from '../../../Utilities';
-import { IStyleSet } from '../../../Styling';
 import { Icon } from '../../../Icon';
 import {
   IPersonaPresenceProps,
@@ -76,8 +75,8 @@ export class PersonaPresenceBase extends BaseComponent<IPersonaPresenceProps, {}
     );
   }
 
-  private _onRenderIcon = (className?: string, styles?: IStyleSet): JSX.Element => (
-    <Icon className={className} iconName={this._determineIcon()} style={styles} />
+  private _onRenderIcon = (className?: string, style?: React.CSSProperties): JSX.Element => (
+    <Icon className={className} iconName={this._determineIcon()} style={style} />
   );
 
   private _determineIcon = (): string | undefined => {
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
index 1c6d09d90853f2..b4680e63157ac5 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BaseComponent, IClassNames, classNamesFunction, css, format, getId } from '../../Utilities';
+import { BaseComponent, classNamesFunction, css, format, getId } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { Icon } from '../../Icon';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { IRatingProps, RatingSize, IRatingStyleProps, IRatingStyles } from './Rating.types';
@@ -10,7 +11,7 @@ interface IRatingStarProps extends React.AllHTMLAttributes<HTMLElement> {
   fillPercentage: number;
   disabled: boolean;
   readOnly: boolean;
-  classNames: IClassNames<IRatingStyles>;
+  classNames: IProcessedStyleSet<IRatingStyles>;
 }
 
 export interface IRatingState {
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
index ed521005031fb6..e99d038a740ccc 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { getGlobalClassNames, HighContrastSelector, IRawStyle } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerCircle-root',
@@ -12,7 +12,7 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IRawStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
index 35e88286c7fb30..56baee2fc573aa 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
-import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
+import { IStyle, ITheme, IRawStyle } from '../../../Styling';
+import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
 
 export interface IShimmerCircle {}
 
@@ -23,7 +23,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
   /**
    * Used to
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -38,7 +38,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement
 
 export interface IShimmerCircleStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
   theme: ITheme;
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
index a64cf5ca82a7d9..4967c873161f9c 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.base.tsx
@@ -5,7 +5,7 @@ import {
   IShimmerElementsGroupStyleProps,
   IShimmerElementsGroupStyles
 } from './ShimmerElementsGroup.types';
-import { IStyleSet } from '../../../Styling';
+import { IRawStyle } from '../../../Styling';
 import { ShimmerElementType, ShimmerElementsDefaultHeights, IShimmerElement } from '../Shimmer.types';
 import { ShimmerLine } from '../ShimmerLine/ShimmerLine';
 import { ShimmerGap } from '../ShimmerGap/ShimmerGap';
@@ -66,11 +66,11 @@ export class ShimmerElementsGroupBase extends BaseComponent<IShimmerElementsGrou
     return renderedElements;
   };
 
-  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyleSet | undefined => {
+  private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IRawStyle | undefined => {
     const elemHeight: number | undefined = elem.height;
     const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0;
 
-    let borderStyle: IStyleSet | undefined;
+    let borderStyle: IRawStyle | undefined;
 
     if (!elem.verticalAlign || elem.verticalAlign === 'center') {
       borderStyle = {
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
index 7133b1e438a48b..53f846490de932 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerGap-root'
@@ -11,7 +11,7 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : {};
+  const styles: IRawStyle = !!borderStyle ? borderStyle : {};
 
   return {
     root: [
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
index 9b3fa455e1a48a..2bfa8fb98fc0ce 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
-import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
+import { IStyle, IRawStyle, ITheme } from '../../../Styling';
+import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
 
 export interface IShimmerGap {}
 
@@ -29,7 +29,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
   /**
    * Sets custom styling of the gap.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -44,7 +44,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes<HTMLElement> {
 
 export interface IShimmerGapStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
   theme: ITheme;
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
index 03e8d7a1c77ce5..d02c980f853708 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts
@@ -1,5 +1,5 @@
 import { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types';
-import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
+import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling';
 
 const GlobalClassNames = {
   root: 'ms-ShimmerLine-root',
@@ -15,9 +15,9 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles {
   const { palette } = theme;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const styles: IStyleSet = !!borderStyle ? borderStyle : { borderWidth: '0px' };
+  const styles: IRawStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' };
 
-  const sharedCornerStyles: IStyleSet = {
+  const sharedCornerStyles: IRawStyle = {
     position: 'absolute',
     fill: palette.white
   };
diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
index 7d4dd787d1bf6e..0e831aeeb4fd9e 100644
--- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IStyle, IStyleSet, ITheme } from '../../../Styling';
-import { IRefObject, IStyleFunctionOrObject } from '../../../Utilities';
+import { IStyle, IRawStyle, ITheme } from '../../../Styling';
+import { IStyleFunctionOrObject, IRefObject } from '../../../Utilities';
 
 export interface IShimmerLine {}
 
@@ -29,7 +29,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
   /**
    * Sets custom styling of the rectangle.
    */
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
 
   /**
    * Theme provided by High-Order Component.
@@ -44,7 +44,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes<HTMLElement>
 
 export interface IShimmerLineStyleProps {
   height?: number;
-  borderStyle?: IStyleSet;
+  borderStyle?: IRawStyle;
   theme: ITheme;
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx
index 155d389a1fb458..0453e20bafadb6 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BaseComponent, classNamesFunction, divProperties, getNativeProps, IClassNames } from '../../Utilities';
+import { BaseComponent, classNamesFunction, divProperties, getNativeProps } from '../../Utilities';
+import { IProcessedStyleSet } from '../../Styling';
 import { ITooltipProps, ITooltipStyleProps, ITooltipStyles, TooltipDelay } from './Tooltip.types';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
@@ -21,7 +22,7 @@ export class TooltipBase extends BaseComponent<ITooltipProps, any> {
     }
   };
 
-  private _classNames: IClassNames<ITooltipStyles>;
+  private _classNames: IProcessedStyleSet<ITooltipStyles>;
 
   public render(): JSX.Element {
     const {
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts
index 336a9ff4614646..2965b2394327dc 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts
@@ -15,16 +15,12 @@ export const getStyles = (props: ITooltipStyleProps): ITooltipStyles => {
         animationDelay: '300ms',
         maxWidth: maxWidth
       },
-      delay === TooltipDelay.zero && [
-        {
-          animationDelay: '0s'
-        }
-      ],
-      delay === TooltipDelay.long && [
-        {
-          animationDelay: '500ms'
-        }
-      ],
+      delay === TooltipDelay.zero && {
+        animationDelay: '0s'
+      },
+      delay === TooltipDelay.long && {
+        animationDelay: '500ms'
+      },
       className
     ],
     content: [
diff --git a/packages/styling/src/MergeStyles.ts b/packages/styling/src/MergeStyles.ts
index 23e5b0c90cec7e..1e438a7c8b1286 100644
--- a/packages/styling/src/MergeStyles.ts
+++ b/packages/styling/src/MergeStyles.ts
@@ -4,6 +4,7 @@ export {
   IRawStyle,
   IStyle,
   IStyleSet,
+  IProcessedStyleSet,
   IStyleSheetConfig,
   InjectionMode,
   Stylesheet,
diff --git a/packages/utilities/jest.config.js b/packages/utilities/jest.config.js
index 75777beb26672a..3e8f1ab9a5e628 100644
--- a/packages/utilities/jest.config.js
+++ b/packages/utilities/jest.config.js
@@ -4,5 +4,3 @@ module.exports = createConfig({
   setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
   snapshotSerializers: [path.resolve(__dirname, './node_modules/@uifabric/jest-serializer-merge-styles')]
 });
-
-console.log(module.exports.setupFiles);
diff --git a/packages/utilities/src/IClassNames.ts b/packages/utilities/src/IClassNames.ts
index da7501f6c408f9..8c77fcb5bc086b 100644
--- a/packages/utilities/src/IClassNames.ts
+++ b/packages/utilities/src/IClassNames.ts
@@ -1 +1,4 @@
+/**
+ * @deprecated Use `IProcessedStyleSet` from @uifabric/styling or @uifabric/merge-styles instead.
+ */
 export type IClassNames<T> = { [key in keyof T]: string };
diff --git a/packages/utilities/src/IStyleFunction.ts b/packages/utilities/src/IStyleFunction.ts
index 291ca7c6c03d9c..cf598645419f3d 100644
--- a/packages/utilities/src/IStyleFunction.ts
+++ b/packages/utilities/src/IStyleFunction.ts
@@ -1 +1 @@
-export type IStyleFunction<TStylesProps, TStyles> = (props: TStylesProps) => Partial<TStyles>;
+export { IStyleFunction } from '@uifabric/merge-styles';
diff --git a/packages/utilities/src/classNamesFunction.ts b/packages/utilities/src/classNamesFunction.ts
index bcbed39b6fe696..958ec037cad66f 100644
--- a/packages/utilities/src/classNamesFunction.ts
+++ b/packages/utilities/src/classNamesFunction.ts
@@ -1,17 +1,34 @@
-import { mergeStyleSets, IStyle } from '@uifabric/merge-styles';
-import { IClassNames } from './IClassNames';
-import { IStyleFunction } from './IStyleFunction';
-import { IStyleFunctionOrObject } from './styled';
+import { mergeStyleSets, IStyle, IStyleSet, IProcessedStyleSet } from '@uifabric/merge-styles';
+import { IStyleFunctionOrObject } from '@uifabric/merge-styles';
 
 /**
  * Creates a getClassNames function which calls getStyles given the props, and injects them
  * into mergeStyleSets.
  */
-export function classNamesFunction<TStyleProps extends {}, TStyles extends { [P in keyof TStyles]: IStyle }>(): (
-  getStyles?: IStyleFunctionOrObject<TStyleProps, TStyles>,
+export function classNamesFunction<TStyleProps extends {}, TStyleSet extends IStyleSet<TStyleSet>>(): (
+  getStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined,
   styleProps?: TStyleProps
-) => IClassNames<TStyles> {
+) => IProcessedStyleSet<TStyleSet> {
   // TODO: memoize.
-  return (getStyles?: IStyleFunctionOrObject<TStyleProps, TStyles>, styleProps?: TStyleProps): IClassNames<TStyles> =>
-    mergeStyleSets(getStyles && (typeof getStyles === 'function' ? getStyles(styleProps!) : getStyles));
+
+  const getClassNames = (
+    styleFunctionOrObject: IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined,
+    styleProps: TStyleProps = {} as TStyleProps
+  ): IProcessedStyleSet<TStyleSet> => {
+    // styleSet might be undefined if styleFunctionOrObject is undefined, but getStyles should never
+    // ordinarily be undefined (it would hardly make any sense).
+    // However, because we usually use `props.styles` as the argument to an invocation of this method, and
+    // `props.styles` itself is defined as optional, this avoids the need to use `!` at all invocation points.
+    if (styleFunctionOrObject === undefined) {
+      return {} as IProcessedStyleSet<TStyleSet>;
+    }
+
+    const styleSet =
+      styleFunctionOrObject &&
+      (typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps!) : styleFunctionOrObject);
+
+    return mergeStyleSets(styleSet as TStyleSet);
+  };
+
+  return getClassNames;
 }
diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts
index 53dacd171c3fb1..0dd5a470c5862b 100644
--- a/packages/utilities/src/index.ts
+++ b/packages/utilities/src/index.ts
@@ -1,3 +1,4 @@
+export { IStyleFunctionOrObject } from '@uifabric/merge-styles';
 export * from './aria';
 export * from './Async';
 export * from './AutoScroll';
diff --git a/packages/utilities/src/styled.test.tsx b/packages/utilities/src/styled.test.tsx
index 9bb432aa7aec6e..ae65817b8dd956 100644
--- a/packages/utilities/src/styled.test.tsx
+++ b/packages/utilities/src/styled.test.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { styled, IStyleFunctionOrObject } from './styled';
+import { styled } from './styled';
 import * as renderer from 'react-test-renderer';
 import { Customizer } from './Customizer';
-import { IStyle, Stylesheet, InjectionMode } from '@uifabric/merge-styles';
+import { IStyle, Stylesheet, InjectionMode, IStyleFunctionOrObject } from '@uifabric/merge-styles';
 import { classNamesFunction } from './classNamesFunction';
 
 interface ITestStyles {
diff --git a/packages/utilities/src/styled.tsx b/packages/utilities/src/styled.tsx
index a4d59a5af17344..e5ae684c5507d8 100644
--- a/packages/utilities/src/styled.tsx
+++ b/packages/utilities/src/styled.tsx
@@ -1,17 +1,11 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { concatStyleSets } from '@uifabric/merge-styles';
+import { concatStyleSets, IStyleSet, IStyleFunctionOrObject, IConcatenatedStyleSet } from '@uifabric/merge-styles';
 import { IStyleFunction } from './IStyleFunction';
 import { CustomizableContextTypes } from './customizable';
 import { Customizations, ICustomizations } from './Customizations';
 
-export type IStyleFunctionOrObject<TStyleProps, TStyles> = IStyleFunction<TStyleProps, TStyles> | Partial<TStyles>;
-
-export interface IPropsWithStyles<TStyleProps, TStyles> {
-  styles?: IStyleFunctionOrObject<TStyleProps, TStyles>;
-  subComponents?: {
-    [key: string]: IStyleFunction<{}, {}>;
-  };
+export interface IPropsWithStyles<TStyleProps, TStyleSet extends IStyleSet<TStyleSet>> {
+  styles?: IStyleFunctionOrObject<TStyleProps, TStyleSet>;
 }
 
 export interface ICustomizableProps {
@@ -45,9 +39,13 @@ const DefaultFields = ['theme', 'styles'];
  * @param getProps - A helper which provides default props.
  * @param customizable - An object which defines which props can be customized using the Customizer.
  */
-export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TStyles>, TStyleProps, TStyles>(
+export function styled<
+  TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet>,
+  TStyleProps,
+  TStyleSet extends IStyleSet<TStyleSet>
+>(
   Component: React.ComponentClass<TComponentProps> | React.StatelessComponent<TComponentProps>,
-  baseStyles: IStyleFunctionOrObject<TStyleProps, TStyles>,
+  baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>,
   getProps?: (props: TComponentProps) => Partial<TComponentProps>,
   customizable?: ICustomizableProps
 ): (props: TComponentProps) => JSX.Element {
@@ -74,11 +72,11 @@ export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TSt
   return Wrapped as (props: TComponentProps) => JSX.Element;
 }
 
-function _resolve<TStyleProps, TStyles>(
+function _resolve<TStyleProps, TStyleSet extends IStyleSet<TStyleSet>>(
   styleProps: TStyleProps,
-  ...allStyles: (IStyleFunctionOrObject<TStyleProps, Partial<TStyles>> | undefined)[]
-): Partial<TStyles> | undefined {
-  const result: Partial<TStyles>[] = [];
+  ...allStyles: (IStyleFunctionOrObject<TStyleProps, TStyleSet> | undefined)[]
+): IConcatenatedStyleSet<TStyleSet> | undefined {
+  const result: Partial<TStyleSet>[] = [];
 
   for (const styles of allStyles) {
     if (styles) {
@@ -86,7 +84,12 @@ function _resolve<TStyleProps, TStyles>(
     }
   }
   if (result.length) {
-    return concatStyleSets(...result);
+    // cliffkoh: I cannot figure out how to avoid the cast to any here.
+    // It is something to do with the use of Omit in IStyleSet.
+    // It might not be necessary once  Omit becomes part of lib.d.ts (when we remove our own Omit and rely on
+    // the official version).
+    // tslint:disable-next-line:no-any
+    return concatStyleSets(...(result as any)) as IConcatenatedStyleSet<TStyleSet>;
   }
 
   return undefined;
diff --git a/scripts/lint-staged/tslint.js b/scripts/lint-staged/tslint.js
index 4131033c139e73..c9f68ea55928ca 100644
--- a/scripts/lint-staged/tslint.js
+++ b/scripts/lint-staged/tslint.js
@@ -3,7 +3,7 @@ const path = require('path');
 const fs = require('fs');
 const msCustomRulesMain = require.resolve('tslint-microsoft-contrib');
 const rulesPath = path.dirname(msCustomRulesMain);
-const tslintPath = 'node ' + path.resolve(__dirname, '../node_modules/tslint/lib/tslint-cli');
+const tslintPath = 'node ' + path.resolve(__dirname, '../node_modules/tslint/lib/tslintCli');
 
 const files = process.argv.slice(2);
 
diff --git a/scripts/package.json b/scripts/package.json
index 2e89bce0224f42..df9df230e77ab5 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -42,7 +42,7 @@
     "ts-loader": "^4.1.0",
     "tslint": "^5.7.0",
     "tslint-microsoft-contrib": "^5.0.1",
-    "typescript": "2.8.1",
+    "typescript": "2.8.4",
     "webpack": "4.7.0",
     "webpack-bundle-analyzer": "^2.11.1",
     "webpack-cli": "2.1.2",
diff --git a/scripts/tasks/tslint.js b/scripts/tasks/tslint.js
index 6f2a8224247230..044be450648b73 100644
--- a/scripts/tasks/tslint.js
+++ b/scripts/tasks/tslint.js
@@ -7,7 +7,7 @@ module.exports = function(options) {
   const rulesPath = path.dirname(msCustomRulesMain);
   const projectPath = path.resolve(process.cwd(), 'tsconfig.json');
   const sourcePath = path.resolve(process.cwd(), 'src/**/*.ts*');
-  const tslintPath = 'node ' + resolve.sync('tslint/lib/tslint-cli');
+  const tslintPath = 'node ' + resolve.sync('tslint/lib/tslintCli');
 
   return exec(`${tslintPath} --project ${projectPath} -t stylish -r ${rulesPath}`, undefined, undefined, process);
 };